Agent skill
frontend-skill
Build frontend user interfaces including pages, components, layouts, and styling. Use for UI development and presentation layers.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/frontend-skill
SKILL.md
Frontend Skill – UI Pages & Components
Instructions
-
Pages & Routing
- Create structured pages and routes
- Organize UI by feature or domain
- Support responsive layouts
-
Component Development
- Build reusable, composable components
- Separate presentation and logic
- Manage component state cleanly
-
Layout Structure
- Implement consistent layouts
- Use grid and flexbox appropriately
- Ensure responsiveness across devices
-
Styling
- Apply modern CSS or styling frameworks
- Maintain consistent design tokens
- Support theming and accessibility
Best Practices
- Use reusable and modular components
- Follow mobile-first design principles
- Keep styles consistent and maintainable
- Ensure accessibility standards
- Optimize UI for performance
Example Structure
<main class="layout">
<header class="navbar">Navigation</header>
<section class="content">
<Card />
</section>
</main>
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?