teach-impeccable
Gather design context for this project, then persist it for all future sessions.
Step 1: Explore the Codebase
Before asking questions, thoroughly scan the project to discover what you can:
- README and docs: Project purpose, target audience, any stated goals
- Package.json / config files: Tech stack, dependencies, existing design libraries
- Existing components: Current design patterns, spacing, typography in use
- Brand assets: Logos, favicons, color values already defined
- Design tokens / CSS variables: Existing color palettes, font stacks, spacing scales
- Any style guides or brand documentation
Note what you've learned and what remains unclear.
Step 2: Ask UX-Focused Questions
STOP and call the AskUserQuestionTool to clarify. Focus only on what you couldn't infer from the codebase:
More from kcchien/skills
excalidraw
Create professional diagrams and visualizations using Excalidraw JSON format. Specialized for IT architecture diagrams, flowcharts, network topology, system design, microservices, ER diagrams, and state machines. Includes curated color palettes and visual styles. Use when working with .excalidraw files, or when user mentions diagrams, flowcharts, architecture visualization, or drawing. Delegates to subagents to prevent context exhaustion from verbose JSON.
5industrial-expert
>
4vscode-extension-uiux
|
2crisp-reading
>
2agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
2adapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
1