frontend-design
Installation
SKILL.md
Frontend Design — Component & Page Generator
Workflow
Follow these steps for every frontend task:
- Read the target file (if modifying existing code)
- Read
frontend/src/styles/global.cssfor design tokens and custom classes - Reference the baseline-ui skill mentally for component patterns
- Use Bootstrap 5 utility classes — no custom CSS unless a class already exists in
global.css - Match existing patterns from similar pages in the codebase
- Write TypeScript with proper interfaces for all props and data structures
Project Stack
- React 18 with functional components and hooks
- TypeScript — all components must have typed props interfaces
Related skills
More from colaberryintern/colaberryenterprise_ai_leadershipaccelerator
baseline-ui
Output the project design system reference — colors, typography, spacing, component patterns. Invoke when discussing visual consistency, design tokens, or referencing the style guide.
16ui-ux-design
Comprehensive UI/UX design — user research, wireframes, mockups, prototyping, and design review. Invoke for new feature design, page redesign, UX audit, or user flow planning.
1fixing-accessibility
Audit and fix WCAG 2.1 AA accessibility issues in React components. Invoke for accessibility reviews, screen reader support, keyboard navigation, color contrast, and ARIA attributes.
1fixing-motion-performance
Optimize CSS animations, React rendering, and bundle performance. Invoke for animation jank, slow renders, large bundle size, or transition issues.
1