frontend-component
Component Creation
Use Generator Scripts
./scripts/generate-component.sh MyButton # → shared/
./scripts/generate-component.sh ClusterCard clustering # → clustering/
./scripts/generate-hook.sh useTheme
Location Rules
| Type | Path |
|---|---|
| Reusable | components/shared/ |
| Feature-specific | components/[feature]/ |
| Sub-components | components/[feature]/components/ |
Standards
- Tailwind CSS with slate (bg/text) + sky (accents)
- Icons from
lucide-react - Wrap in
memo()for lists/visualizations - Always accept
classNameprop - Use
@/alias for imports
More from diegosouzapw/awesome-omni-skill
music-assistant
Control Home Assistant Music Assistant - browse library, search, play, manage preferences and moods.
12agent-code-generator
Generates Agent definitions (.md files) based on user intent and standard templates.
6terragrunt-generator
Comprehensive toolkit for generating best practice Terragrunt configurations (HCL files) following current standards and conventions. Use this skill when creating new Terragrunt resources (root configs, child modules, stacks, environment setups), or building multi-environment Terragrunt projects.
6api contract sync manager
Validate OpenAPI, Swagger, and GraphQL schemas match backend implementation. Detect breaking changes, generate TypeScript clients, and ensure API documentation stays synchronized. Use when working with API spec files (.yaml, .json, .graphql), reviewing API changes, generating frontend types, or validating endpoint implementations.
5upstash/workflow typescript sdk skill
Lightweight guidance for using the Upstash Workflow SDK to define, trigger, and manage workflows. Use this Skill whenever a user wants to create workflow endpoints, run steps, or interact with the Upstash Workflow client.
5upstash/search typescript sdk
Entry point for documentation skills covering Upstash Search quick starts, core concepts, and TypeScript SDK usage. Use when a user asks how to get started, how indexing works, or how to use the TS client.
5