SkillsAdd

smithery.ai

Frontend Components

Design and build reusable, maintainable UI components following modern architecture patterns for React, Vue, or other frameworks. Use this skill when creating component files (.jsx, .tsx, .vue), implementing component logic, managing component state, defining props interfaces, or organizing component hierarchies in directories like components/, views/, or pages/. Apply this skill when building functional components with hooks (React), composition API components (Vue), single-file components, im…

Installation

$ npx skills add https://smithery.ai
View on skills.sh ↗ Website ↗

Summary

  • Design and build reusable, maintainable UI components following modern architecture patterns for React, Vue, or other frameworks.
  • Use this skill when creating component files (.jsx, .tsx, .vue), implementing component logic, managing component state, defining props interfaces, or organizing component hierarchies in directories like components/, views/, or pages/.
  • Apply this skill when building functional components with hooks (React), composition API components (Vue), single-file components, implementing component composition patterns, managing local vs. lifted state, or creating custom hooks for shared logic.
  • This skill ensures components follow single responsibility principle, are properly encapsulated, have clear prop interfaces with TypeScript types, support reusability across contexts, and follow modern patterns like atomic design, container/presentational separation, and compound components.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Shared topics
vercel-labs/agent-skills 326.5K installs
vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs
react:components Similar name
google-labs-code/stitch-skills

Converts Stitch designs into modular Vite and React components using system-level networking an…

50.7K installs
building-components Similar name
vercel/components.build

Guide for building modern, accessible, and composable UI components. Use when building new comp…

12.5K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai
smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Skill metadata

Parsed from SKILL.md frontmatter.

Declared agents claude-code

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,455 B
  • docs SUMMARY.md 937 B

History

  1. First recorded snapshot · 6 installs

SKILL.md

Frontend Components

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend components.

When to use this skill

  • When creating or modifying React (.jsx, .tsx), Vue (.vue), or other framework component files
  • When implementing functional components with hooks (useState, useEffect, custom hooks)
  • When using Vue Composition API or Single File Components (SFC)
  • When defining component props, interfaces, or TypeScript types for components
  • When managing component state (local state, lifted state, context, or global state)
  • When building reusable UI components (buttons, cards, forms, modals, dropdowns)
  • When implementing component composition or compound component patterns
  • When organizing components in feature-based or atomic design structures
  • When creating custom hooks (React) or composables (Vue) for shared logic
  • When implementing component lifecycle logic, side effects, or data fetching
  • When optimizing component rendering with memoization (React.memo, useMemo, useCallback)
  • When working with component styling (CSS modules, styled-components, scoped styles)
  • When implementing controlled vs. uncontrolled component patterns for forms
  • When creating container/presentational component separation for better maintainability

Instructions

For details, refer to the information provided in this file: [frontend components](../../../agent-os/standards/frontend/components.md)