Create project Design System with LLM-compatible documentation
Visual Architecture / Components / AI
Task metadata
Original request
"Criar um design system com componentes reutilizáveis, design tokens e documentação para LLMs. Futuramente vamos organizar os componentes do repo e torná-los reutilizáveis, sempre que possível"
Structured task
Problem
The interface contains complex components with scattered, hardcoded colors, paddings, and font variations throughout the frontend. This requires constant CSS reiterations and triggers hallucinations when bots code new views.
Context
As new modules for music-study (like HarmonicLens) are implemented, extracting and cataloging standardized components drastically speeds up workflow. Integrating 'Active Documentation' focused on LLM prompting prepares the project for an assisted scale with a flawless session hit rate.
Expected
Survey and document the Design Tokens (Typography, custom dark theme palettes, breakpoints, borders) applied in the app. Convert raw elements (such as Displays, Tabs, Grids, and Drawers) into a reusable and composable React component set. Write specialized documentation or an AI SKILL providing direct guidelines on the repository's visual standards.
Notes
Refer to structures adopted by the local design-system repository within this Workspace, mirroring best practices to group exports, set up strictly-typed TypeScript interfaces, and use Tailwind styling patterns.