design-component
Design a UI component with specifications for layout, states, interactions, and accessibility.
Skill by yu-iskw
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/yu-iskw-design-component
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/design-component
What's inside
- Skill name
design-component- Description
- Design a UI component with specifications for layout, states, interactions, and accessibility. Use when creating new UI components or redesigning existing ones.
- License
- Apache-2.0
- Instructions
- 23 lines in SKILL.md · view on GitHub
Files (1)
- SKILL.md
SKILL.md (first lines)
# Design Component Design the following UI component: $ARGUMENTS ## Design Deliverables 1. **Component specification** with props, states, and layout 2. **Interaction design** with user flows and feedback 3. **Accessibility specification** (ARIA roles, keyboard navigation, screen reader support) 4. **Responsive behavior** across screen sizes ## Context Design components that are: - Accessible (WCAG 2.1 AA compliant) - Responsive across screen sizes - Consistent with existing design patterns - Well-documented for implementation
From yu-iskw/software-development-team-plugin, Apache-2.0.
More from yu-iskw/software-development-team-plugin
- 0.438score
plugin-verification
yu-iskw
Verify Claude extensions and plugins across hooks, skills, sub-agents, teams, manifest, structure, runtime loading, and CI parity.
SkillDFreshness: D★ 3Claude Code +9 - 0.438score
implement-agent-teams
yu-iskw
Set up and validate Claude agent team configurations, collaboration flows, and operator guidance for team-based execution.
SkillDFreshness: D★ 3Claude Code +9 - 0.438score
implement-claude-extensions
yu-iskw
Choose and implement the right Claude extension type by comparing hooks, skills, sub-agents, agent teams, and plugin packaging patterns.
SkillDFreshness: D★ 3Claude Code +9 - 0.438score
implement-agent-skills
yu-iskw
Implement and maintain Claude Agent Skills with valid SKILL.md frontmatter, focused instructions, and progressive disclosure.
SkillDFreshness: D★ 3Claude Code +9 - 0.438score
implement-plugin
yu-iskw
Package and distribute Claude Code plugins with schema-safe manifests, canonical layout, component wiring, and release-ready validation.
SkillDFreshness: D★ 3Claude Code +9 - 0.436score
compliance-check
yu-iskw
Check license compatibility, data privacy compliance, and AI ethics.
SkillDFreshness: D★ 3Claude Code +9 - 0.436score
implement-feature
yu-iskw
Implement a feature or fix a bug following the project's code patterns and conventions.
SkillDFreshness: D★ 3Claude Code +9 - 0.436score
research
yu-iskw
Research and gather reliable information about libraries, APIs, specifications, and best practices.
SkillDFreshness: D★ 3Claude Code +9 - 0.436score
write-requirements
yu-iskw
Write user stories, acceptance criteria, and technical requirements for a feature or change.
SkillDFreshness: D★ 3Claude Code +9 - 0.435score
implement-hooks
yu-iskw
Implement and validate Claude Code hook configurations and hook scripts for command, prompt, and agent workflows.
SkillDFreshness: D★ 3Claude Code +9 - 0.435score
implement-sub-agents
yu-iskw
Create and validate Claude sub-agent definitions with correct frontmatter, tool permissions, and delegation boundaries.
SkillDFreshness: D★ 3Claude Code +9 - 0.433score
security-audit
yu-iskw
Perform a security audit of the codebase.
SkillDFreshness: D★ 3Claude Code +9
Signals
- Stars
- 3
- Forks
- 1
- Open issues
- 2
- Last commit (this folder)
- Feb 7, 2026 (8 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- Apache-2.0
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from yu-iskw
- 0.460score
implementing-agent-skills
yu-iskw
Implements new Agent Skills for the project.
SkillDFreshness: D★ 9Claude Code +9 - 0.460score
gh-set-active-project
yu-iskw
Sets the active GitHub project and repository context by writing a repo-level config file at .github/project-config.json.
SkillDFreshness: D★ 9Claude Code +9 - 0.457score
gh-project-management
yu-iskw
Comprehensive management of GitHub Projects (v2).
SkillDFreshness: D★ 9Claude Code +9 - 0.457score
gh-issue-management
yu-iskw
Comprehensive management of GitHub issues, including sub-issue hierarchies.
SkillDFreshness: D★ 9Claude Code +9 - 0.457score
gh-verifying-context
yu-iskw
Verifies the current GitHub authentication status and git remote against the repo-level config at .github/project-config.json.
SkillDFreshness: D★ 9Claude Code +9 - 0.454score
lint-and-fix
yu-iskw
Run make format and make lint, then fix linter violations.
SkillDFreshness: D★ 9Claude Code +9
Cite this page
design-component skill. Agent Mart. https://agentmart.dev/skills/yu-iskw-design-component (last updated 2026-10-24)