julianoczkowski/designer-skills
8 skills33.2k installs3.8k starsGitHub
Install
npx skills add https://github.com/julianoczkowski/designer-skillsSkills in this repo
1Design Reviewdesign-review is a skill that automates structured design QA for built interfaces. It compares the running application against a design brief and aesthetic philosophy, capturing mandatory responsive screenshots (mobile/tablet/desktop) via Playwright or browser MCP, then systematically evaluates visual hierarchy, color consistency, component reuse, interactive states, responsive adaptation, accessibility compliance, and dark mode support. Developers invoke it after building features to catch rendering issues, spacing inconsistencies, and aesthetic deviations that code review alone misses. The skill generates a prioritized refinement report (must fix, should fix, could improve) with file-specific references and screenshot evidence, saved as DESIGN_REVIEW.md alongside the brief. Mandatory visual screenshot capture at 375px, 768px, and 1280px breakpoints using Playwright MCP or browser tools - not optional code-only review. Systematic checklist covering visual hierarchy, consistency, aesthetic fidelity, component quality, states, responsive behavior, accessibility, typography, dark mode, and mobile-first practices.4.3kinstalls2Design TokensThis skill generates a complete design token system for new projects, including semantic color tokens, spacing scales, typography ramps, layout values, motion timing, and responsive breakpoints in light and dark modes. Developers run it after establishing a design brief and philosophy (Dieter Rams, Brutalist, Scandinavian, etc.) but before building any UI components. The skill scans existing token definitions, extends rather than replaces them, and outputs tokens in the format matching the project's tech stack (Tailwind config, CSS custom properties, or theme.ts). Both light and dark palettes are intentionally designed per philosophy, not inverted. Every component built afterward references these tokens instead of hardcoding values. Generates semantic color tokens (bg, text, border, accent, status) with light and dark mode palettes. Builds consistent spacing scales, typography ramps, and layout tokens derived from aesthetic philosophy.4.3kinstalls3Information ArchitectureInformation Architecture (IA) establishes the structural skeleton of a product or site between design brief and build phase. This skill guides developers through mapping site hierarchies, navigation systems, content priorities, and critical user flows. Developers use it after the design brief is finalized and before creating build tasks. The workflow examines existing routing patterns (Next.js, React Router, Vue Router, SvelteKit), navigation and layout components, and URL conventions, then extends or improves them. Through structured interviews covering user priorities, navigation depth, content growth patterns, distinct user types, and time-on-page analysis, the skill produces a formal IA document specifying site maps, navigation models, content hierarchies, user flows, naming conventions, component reuse patterns, content growth strategies, and URL rules. Examines existing codebase routing (Next.js, React Router, Vue Router, SvelteKit) and navigation components before proposing changes.4.3kinstalls4Grill MeGrill Me conducts rigorous design interviews by asking targeted questions about plans, features, and UX decisions while systematically exploring decision trees to identify gaps and dependencies. Developers and designers use it to validate landing pages, dashboards, settings interfaces, and portfolio concepts before implementation. The skill prioritizes codebase and component inspection over repetitive questioning, recommending answers for each question asked. It resolves design decisions one by one, ensuring all stakeholders reach aligned understanding. Workflows include stress-testing approaches, challenging assumptions, exploring design implications across feature branches, and uncovering hidden requirements that emerge through systematic exploration. Conducts relentless design interviews by walking decision trees systematically. Examines existing codebase, components, and design tokens before asking questions. Provides recommended answers for each question to accelerate resolution. Stress-tests plans by identifying gaps and challenging assumptions. Resolves dependencies between design decisions to reach shared understanding.4.2kinstalls5Frontend DesignThis skill guides creation of production-grade frontend interfaces with exceptional aesthetic detail and distinctive character. Developers use it when building components, pages, or full applications that need to avoid generic AI output and feel intentionally designed. The workflow starts by scanning the existing codebase for components, design tokens, Tailwind config, and UI framework themes, then committing to an aesthetic direction (Dieter Rams, Swiss, Japanese Minimalism, Brutalist, Scandinavian, Art Deco, Neo-Memphis, or Editorial). Implementation covers typography pairing, restrained color systems, spatial composition, motion principles, and dark mode support via CSS variables. Mobile-first development is mandatory, with strict attention to touch targets, readability, and breakpoint progression. Eight concrete aesthetic philosophies (Dieter Rams, Swiss, Japanese Minimalism, Brutalist, Scandinavian, Art Deco, Neo-Memphis, Editorial) with typography, color, layout, spacing, motion, and detail guidance for each.4.2kinstalls6Design FlowThe design-flow skill Run the full design-to-build workflow as a guided sequence. Orchestrates all designer skills in order, from grilling through review. Use when user wants to go through the complete design process, start a project from scratch, run the full flow, or mentions "design flow" or "full workflow". This skill orchestrates the full designer workflow by running each skill in sequence. You are a guide walking the designer through each phase. Do not rush. Each phase must be completed and confirmed before moving to the next. - "Run the full design flow" - "Walk me through the complete process for a new project" - "Start from scratch and take me through everything" - "Design flow for a dashboard app" `` 1. Grill Me → Clarify thinking 2. Design Brief → Document intent 3. Info Architecture → Define structure 4. Design Tokens → Establish visual system 5. Brief to Tasks → Plan the build 6. Frontend Design → Build it 7. Design Review → Run separately when ready `` 1.4kinstalls7Design BriefThe design-brief skill Create a design brief through an interactive interview, codebase exploration, and experience design decisions. Saved as a markdown file in the project. Use when user wants to write a design brief, plan a new feature or page, define a UI direction, or mentions "brief". This skill creates a design brief through structured conversation. You may skip steps if they are not necessary. - "Write a brief for the onboarding flow" - "I need to plan a settings page before I start building" - "Help me define the direction for a marketing landing page" - "Brief this: a dashboard that shows project health metrics" 1. Ask the user for a detailed description of what they want to build, who it is for, and any constraints or ideas they already have. 2. Explore the existing codebase to understand the current state. Scan for each of the following specifically: - CSS variables / tokens: files named tokens.css, variables.css, theme.css, or :root declarations with custom properties - Tailwind config: tailwind.config.js or4kinstalls8Brief To TasksThe brief-to-tasks skill Break a design brief into an ordered checklist of independently buildable tasks using vertical slices. Saves as a markdown checklist. Use when user wants to break down work, create tasks from a brief, plan implementation order, or mentions "tasks" or "breakdown". This skill turns a design brief into an ordered, buildable task list. Each task is a vertical slice: a piece of UI that can be built, reviewed, and verified on its own. - "Break the brief into tasks" - "What should I build first?" - "Create a task list from the design brief" - "Plan the build order for this feature" 1. Read the design brief. Look for .design/ /DESIGN_BRIEF.md. If multiple subfolders exist, use the most recently modified one, or ask the user which feature they are working on. Also check for INFORMATION_ARCHITECTURE.md and a tokens file in the same subfolder. If none exist, ask the user to describe what they are building. 2. Explore the existing codebase to understand what is already built. Scan4kinstalls