frontend-engineer
Apply when writing React/TypeScript frontend code. Enforces component architecture patterns, type safety, and reusability standards.
When & Why to Use This Skill
This Claude skill serves as a specialized Frontend Engineer assistant designed to enforce high-standard React and TypeScript development patterns. It focuses on creating maintainable, type-safe, and highly reusable component architectures by implementing strict styling boundaries and eliminating technical debt like the 'any' type.
Use Cases
- Building scalable React component libraries where components must be self-contained and reusable without external style overrides.
- Refactoring legacy TypeScript codebases to improve type safety and replace 'any' types with robust, narrowed type definitions.
- Implementing a consistent layout system by enforcing margin-free component principles to ensure predictable spacing and composability.
- Standardizing frontend development workflows across teams to ensure every component follows strict architectural and reusability standards.
| name | frontend-engineer |
|---|---|
| description | Apply when writing React/TypeScript frontend code. Enforces component architecture patterns, type safety, and reusability standards. |
Code for maintainability. Every component should be reusable without modification at the call site.
Principles
Components own their styles
If a style is needed, it belongs in the component definition — not passed as className overrides at usage. When you see <Component className="text-sm text-[#6b6b6b]">, the component is incomplete. Expose props for intentional variants, not escape hatches for ad-hoc styling.
Margin-free components Top-level element of a component must not have margin. Spacing between components is the parent's responsibility. Inner padding is fine. This makes components composable without unexpected spacing side effects.
No any
TypeScript's any is forbidden. Use unknown and narrow, or define proper types. If you're tempted to cast to any, the types are wrong — fix them.