frontend-components
Imported from https://github.com/grimmolf/mga-soap-calculator.
Packaged view
This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.
Install command
npx @skill-hub/cli install grimmolf-mga-soap-calculator-frontend-components
Repository
Skill path: .claude/skills/frontend-components
Imported from https://github.com/grimmolf/mga-soap-calculator.
Open repositoryBest for
Primary workflow: Ship Full Stack.
Technical facets: Full Stack, Frontend.
Target audience: everyone.
License: Unknown.
Original source
Catalog source: SkillHub Club.
Repository owner: grimmolf.
This is still a mirrored public skill entry. Review the repository before installing into production workflows.
What it helps with
- Install frontend-components into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
- Review https://github.com/grimmolf/mga-soap-calculator before adding frontend-components to shared team environments
- Use frontend-components for development workflows
Works across
Favorites: 0.
Sub-skills: 0.
Aggregator: No.
Original source / Raw SKILL.md
--- name: Frontend Components description: Build reusable, composable UI components with single responsibilities, clear prop interfaces, proper state management, and minimal coupling. Use this skill when creating React, Vue, Angular, or web components with well-defined APIs, sensible defaults, and documentation. Applies to component files, component libraries, design systems, or any modular UI code that should be maintainable, testable, and reusable across different contexts in the application. --- # Frontend Components ## When to use this skill - When creating component files like `Button.tsx`, `Card.jsx`, `Modal.vue`, or any UI component in `components/` - When building a component library or design system with reusable components like `ui/`, `design-system/`, or `shared/` - When defining component props/interfaces with TypeScript types or PropTypes for API clarity - When implementing single-purpose components that do one thing well (button, input, card, modal) - When composing complex UIs by combining smaller, simpler components rather than building monolithic structures - When managing component state and deciding whether state should be local or lifted to parent components - When creating configurable components with props that have sensible default values - When encapsulating implementation details while exposing only necessary public APIs - When naming components descriptively to indicate their purpose (`SubmitButton`, `UserProfileCard`, `ErrorBoundary`) - When documenting component usage, required/optional props, and providing code examples - When keeping the number of props manageable and considering composition patterns when props grow excessive - When building components in React (functional components, hooks), Vue (SFC), Angular, or native web components # 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. ## Instructions For details, refer to the information provided in this file: [frontend components](../../../agent-os/standards/frontend/components.md)