julianoczkowski

Scaffold form components with proper Modus input integration, event handling, validation, and checkbox bug handling

Scaffold a new Modus wrapper component following established SolidJS patterns with proper TypeScript interfaces, event handling, and cleanup

Debug and fix common event handling problems with Modus web components

Apply the critical checkbox value inversion workaround when working with ModusCheckbox components

Create Modus modals using the callback ref pattern for programmatic control

Help with correct Modus icon usage patterns including naming conventions, sizing, and accessibility

Build production-grade frontend interfaces using the Modus 2.0 Design System with Tailwind CSS. Use this skill when the user asks to build web components, pages, dashboards, or application screens. Enforces the 9-color semantic system, Modus Web Components, Modus Icons, and design system compliance. Framework-agnostic (works with SolidJS, React, Angular, or any framework).

Run comprehensive lint checks for SolidJS + Vite project to ensure design system compliance, type safety, and code quality. Use when making code changes, before completing tasks, or when the user requests lint checks.

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".

Run a structured design critique against the brief and codebase. Checks visual hierarchy, consistency, responsiveness, accessibility, and aesthetic fidelity. Use when user wants a design review, critique, QA pass, polish pass, or mentions "review" after building.

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".

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, challenge an approach, or mentions "grill me".

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".

Generate a design tokens file (CSS variables or Tailwind config) based on a chosen aesthetic philosophy, with light and dark mode palettes, spacing scale, type ramp, and component-level tokens. Use when starting a new project, establishing a visual system, setting up tokens, or mentions "tokens" or "design system".

Define the structural layer of a product or site before visual design begins. Covers navigation, content hierarchy, page structure, URL patterns, and user flows. Use when user wants to plan site structure, define navigation, map user flows, organize content, or mentions "IA" or "information architecture".

Build distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, or applications. Generates working code with exceptional attention to aesthetic details and creative choices that avoid generic AI output.

Produce a single self-contained .html file instead of a markdown wall when the answer has shape — side-by-side comparisons, a timeline, a diagram, a sortable list, or a deck. This skill should be used when the user invokes /html or any of its patterns (options, plan, pr, codemap, tokens, motion, diagram, deck, explainer, status, editor), and when a request implies a structured artifact — phrases like "show me my options for X", "write the plan", "do a post-mortem", "make a deck from these notes", "let me triage these", "render the design system", "explain how X works", "diagram the flow". Prefer this skill even when the user says "write me a doc" or "summarize" — HTML is often the better surface, and the user can always ask for markdown if they prefer.