julianoczkowski/designer-skills
8 skills17.5k installs2.2k starsGitHub
Install
npx skills add https://github.com/julianoczkowski/designer-skillsSkills in this repo
1Information ArchitectureInformation Architecture is an agent skill for solo and indie builders who need a structural skeleton before pixels or components multiply. It sits between a written design brief and implementation: you define how people move through the product—primary navigation, nested sections, page templates, URL conventions, and critical flows such as signup or docs discovery. The skill expects a brief at `.design/*/DESIGN_BRIEF.md` when available and otherwise asks what you are building and for whom, then reconciles your plan with what the repo already has (routes, headers, sidebars, layouts). That pairing prevents agents from inventing duplicate routes or orphan pages during codegen. Use it when you mention IA, want to plan site structure, organize documentation trees, or map onboarding without jumping straight into UI polish. Outputs are decision-ready structure artifacts your agent can turn into tickets or file moves, keeping Validate scope and Build frontend work aligned.2.2kinstalls2Design Tokensdesign-tokens is a generator skill for solo builders who want a real design system foundation—not one-off hex codes in components. It walks your agent through auditing what is already in the codebase (CSS custom properties, Tailwind theme blocks, framework theme providers, token JSON) and then producing or extending a coherent token layer: palettes for light and dark modes, spacing rhythm, typography ramp, and component-scoped variables aligned to an aesthetic philosophy you chose in planning. The workflow is deliberately ordered so tokens land after a design brief exists but before UI implementation, which keeps later component work referential instead of repetitive. It fits SaaS dashboards, marketing sites, and content products where Tailwind or CSS-variables are the source of truth, and it reduces drift when you iterate themes or add dark mode late in a solo ship cycle.2.2kinstalls3Design Reviewdesign-review gives solo builders a repeatable critique ritual after implementation: load the design brief, inspect what was actually built in components and styles, and judge the result against hierarchy, consistency, responsive behavior, accessibility, and the chosen aesthetic philosophy. Unlike informal “does this look okay?” chat, the skill treats visual evidence as mandatory—you capture screenshots of the running application so findings reflect what users see, not just what code suggests. It integrates with a `.design/<feature-slug>/DESIGN_BRIEF.md` convention when present, which keeps multi-feature repos organized. Typical triggers include landing page polish, pre-ship QA, or comparing a pasted screenshot to stated direction. Use it when feature work is functionally complete but you want a design-system-aligned pass before distribution or app-store submission.2.2kinstalls4Frontend Designfrontend-design is a designer-skills package that instructs coding agents to ship real, production-grade interfaces with strong visual identity rather than interchangeable SaaS chrome. Before any implementation, the skill forces a structured reconnaissance pass: inventory shared component folders and APIs, extract design tokens from CSS variables or framework themes, read Tailwind extend rules, and note Storybook or font-loading patterns already in the repo. Builders can steer outcomes with natural prompts—hero sections from a brief, Scandinavian cards, or magazine-inspired layouts—and the skill emphasizes distinctive typography, spacing, and composition choices tied to named aesthetics. It fits solo founders who want agent-generated React or similar UI to respect existing systems while still feeling art-directed. Use whenever you are building components, pages, or full applications and care about design quality as much as correctness.2.2kinstalls5Grill MeGrill Me is a journey-wide agent skill that acts as a disciplined design interviewer. Instead of accepting a vague plan, the agent walks every branch of your idea—information architecture, states, constraints, and tradeoffs—until you and the agent align on what you are actually building. It prefers evidence over speculation: when the answer lives in the repo, it inspects components, design tokens, and existing patterns rather than bothering you with questions you already encoded in code. Each question ships with a recommended answer so solo builders do not stall in open-ended debate. Invoke it when you want your landing page, metrics dashboard, settings surface, or portfolio direction challenged before you paint pixels or merge features. It complements planning skills by hardening intent, not by replacing visual exploration or implementation.2.2kinstalls6Design FlowDesign Flow is an orchestrator skill for solo builders who want the entire Julianoczkowski designer sequence without manually invoking each SKILL.md. It walks you phase by phase from clarifying thinking through documenting intent, structuring information, establishing tokens, translating the brief into build tasks, and executing frontend design, with Design Review held for a separate pass when implementation is ready. At kickoff it shows the full map, asks which phases to skip, and only advances after each step is completed and confirmed—matching how real design work gates decisions instead of jumping to high-fidelity screens. Example prompts include running the full flow for a dashboard or starting from scratch on a new product. Pair it when you have time for an end-to-end design runway; skip individual phases when you already carry an approved brief, existing tokens, or a single-component scope.2.2kinstalls7Design Briefdesign-brief is an agent skill that helps solo builders define UI and experience direction before writing components. Through a conversational interview and targeted codebase exploration, it surfaces design tokens, Tailwind or framework themes, shared components, and Storybook usage so new screens match what you already ship. You describe what to build, who it is for, and constraints; the skill can skip steps that are unnecessary and saves the result as a markdown brief in your repo. Use it when you want to brief an onboarding flow, settings page, marketing landing, or metrics dashboard instead of jumping straight into JSX. The outcome is an aligned spec designers and coding agents can follow during frontend build, reducing rework from mismatched spacing, typography, or component patterns.2.2kinstalls8Brief To TasksBrief to Tasks is a designer-skills workflow that converts a design brief into an ordered checklist of vertical slices a solo builder can execute with an coding agent. The process starts by locating DESIGN_BRIEF.md under .design feature folders, pulling information architecture and design tokens when present, and asking the user to clarify the active feature if multiple briefs exist. It then explores the codebase inventory—components, existing views, token sources, naming conventions, and tests—so new tasks align with what is already shipped. Each generated task is scoped as an independent UI slice rather than a horizontal layer, which keeps PRs reviewable and reduces agent thrash. The skill is ideal after visual direction exists but before you commit to a build order, and it hands off cleanly to implementation-focused agents that consume markdown task lists.2.1kinstalls