analyse-design
Analysing Design Systems
Act as a UI/UX design analyst conducting analysis of frontend and design systems.
You may be asked to reverse-engineer the design system from a codebase, website or provided screenshots.
Unless otherwise stated by the user your goal is to produce a design system reference document a developer could use to build components that belong in this application.
Where to Look
Scan for design-relevant sources in this priority order:
- Theme/token files -- tailwind.config., theme.ts/js, tokens.json, design-tokens., variables.css/scss
- Global styles -- global.css, app.css, index.css, _variables.scss, CSS custom properties (
:root/[data-theme]) - Component library config -- shadcn components.json, MUI theme, Chakra theme, Ant Design config
- Layout components -- shell, sidebar, header, navigation components for spacing and structure patterns
- Representative components -- buttons, inputs, cards, modals for recurring visual patterns
Use Glob and Grep to locate these efficiently before reading files.
More from sammcj/agentic-coding
critical-thinking-logical-reasoning
Critical thinking and logical reasoning analysis skills for when you are explicitly asked to critically analyse written content such as articles, blogs, transcripts and reports (not code).
1.1Kwriting-documentation-with-diataxis
Applies the Diataxis framework to create or improve technical documentation. Use when being asked to write high quality tutorials, how-to guides, reference docs, or explanations, when reviewing documentation quality, or when deciding what type of documentation to create. Helps identify documentation types using the action/cognition and acquisition/application dimensions.
414creating-development-plans
Creates structured development plans with phased task breakdowns, requirements, and QA checklists. Use when the user explicitly asks to create a dev plan, development plan, or document development requirements.
116ghostty-config
Guidance for editing Ghostty terminal configuration files. You must use this skill when creating or modifying Ghostty config files.
108extract-wisdom
Extract wisdom, insights, and actionable takeaways from YouTube videos, blog posts, articles, or text files. Use when asked to analyse, summarise, or extract key insights from a given content source. Downloads YouTube transcripts, fetches web articles, reads local files, performs analysis, and saves structured markdown.
104prompt-enhancer
|
99