Ensure accessibility in UI components including semantic HTML, ARIA attributes, keyboard navigation, and WCAG 2.2 AA compliance.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
oimiragieo/agent-studio422026년 7월 14일 업데이트
무료GitHub에 공개
design-systems
Design system lookup, CSS best practices, and AI-driven UI component generation via MCP tools
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기포함된 파일(10)
- SKILL.md2.2 KB
- commands/design-systems.md114 B
- hooks/post-execute.cjs181 B
- hooks/pre-execute.cjs287 B
- references/research-requirements.md775 B
- rules/design-systems.md575 B
- schemas/input.schema.json560 B
- schemas/output.schema.json426 B
- scripts/main.cjs594 B
- templates/implementation-template.md332 B
SKILL.md(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Design Systems
Access design token libraries, CSS documentation, and AI-driven component generation.
Design Systems MCP (southleft/design-systems-mcp)
Semantic search across 188+ design systems (Material, Ant Design, Carbon, Chakra, etc.):
# Setup
npx @southleft/design-systems-mcp
# Example queries via MCP
mcp__design_systems__search_components({ query: "button with loading state" })
mcp__design_systems__get_tokens({ system: "material", category: "color" })
mcp__design_systems__get_patterns({ pattern: "form validation error" })
Use cases: Find existing component patterns before building custom, get design token values, compare component API across systems.
CSS MCP (stolinski/css-mcp)
MDN CSS documentation + browser compatibility via MCP:
mcp__css__query_property({ property: "container-type" }) # Container queries
mcp__css__check_compat({ property: "has()", browsers: ["chrome", "firefox", "safari"] })
mcp__css__get_examples({ selector: ":is()" })
Magic MCP — AI UI Component Generation (21st-dev)
Generate UI components from natural language:
# Configure Magic MCP with 21st-dev API key
mcp__magic__create_component({ description: "dark mode toggle with animation", framework: "react" })
mcp__magic__find_component({ query: "pricing table with feature comparison" })
Design Token Standards
/* CSS Custom Properties (recommended) */
--color-primary: #6366f1;
--spacing-md: 1rem;
--radius-lg: 0.5rem;
--font-sans: 'Inter', system-ui, sans-serif;
/* Token categories: color, spacing, typography, radius, shadow, z-index */
Anti-Patterns
- Never hardcode hex colors in components — use design tokens
- Never reinvent components that exist in your design system
- Never use px for spacing in responsive layouts — use rem/em
When to invoke
Skill({ skill: 'design-systems' }) for design token lookup, component pattern research, CSS best practices, AI component generation
리뷰
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
댓글
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
같은 저장소의 스킬
Use when you want to improve response quality through meta-cognitive reasoning. Applies 15+ reasoning methods to reconsider and refine initial outputs.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
oimiragieo/agent-studio422026년 7월 14일 업데이트
N-round opposing-stance debates for trade-off analysis. Assigns pro/con roles to agents, runs structured debate rounds with quality scoring, and produces a moderator synthesis with confidence-rated recommendation. Generalizable to architecture, technology, security, and design decisions.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
oimiragieo/agent-studio422026년 7월 14일 업데이트
Force adversarial code review stance that eliminates confirmation bias — reviewer must find issues or re-analyze
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
oimiragieo/agent-studio422026년 7월 14일 업데이트
Creates specialized AI agents on-demand when no existing agent matches a request. Use when the Router cannot find a suitable agent for a task. Enables self-evolution by generating persistent agents.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
oimiragieo/agent-studio422026년 7월 14일 업데이트
LLM-as-judge evaluation framework with 5-dimension rubric (accuracy, groundedness, coherence, completeness, helpfulness) for scoring AI-generated content quality with weighted composite scores and evidence citations
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
oimiragieo/agent-studio422026년 7월 14일 업데이트