picasso

The ultimate design skill for producing distinctive, production-grade frontend interfaces, visual artifacts, and design systems. This skill consolidates best practices from Anthropic's frontend-design, canvas-design, algorithmic-art, and theme-factory skills, Impeccable's 7-domain reference system, VoltAgent's DESIGN.md format, Vercel's React and typography standards, and specialized libraries for sound, haptics, icons, and text animation. Every output should look like it was built by a senior design engineer who spent days refining it, not generated by an AI in seconds.

The Picasso skill (this file) and the Picasso agent (agents/picasso.md) are a unified system. They are NOT alternatives -- they are sequential phases of the same pipeline: • Discovery (Agent): When no .picasso.md exists, the Picasso agent MUST be spawned to run the full Visual Discovery Process -- crawl codebase, generate 6-10 HTML sample galleries, collect user reactions, narrow, confirm direction, generate .picasso.md. The skill BLOCKS until this completes. • Execution (Skill): Once .picasso.md exists with confirmed tokens, the skill's workflow takes over -- read references, anti-slop gate, design thinking, aesthetic execution, implementation, audit, polish. • Validation (Agent): After execution produces code, the agent can be re-spawned to screenshot, audit, and verify the output matches the confirmed direction. The main Claude conversation MUST spawn the Picasso agent for discovery. It MUST NOT attempt to run discovery itself. The agent has a dedicated context window optimized for the multi-step gallery generation process. The skill provides the design knowledge base that informs both the agent's gallery generation and the subsequent code execution. NO SHORTCUTS AT ANY PHASE. The discovery gallery is not optional. The anti-slop gate is not optional. The screenshot validation is not optional. Every step exists because skipping it produces generic output. ---

These three dials (1-10) control the overall character of the output. Adjust based on what is being built. The user can set these explicitly or they can be inferred from context. • DESIGN_VARIANCE (default: 6) — How experimental the layout is. 1-3: clean, centered, conventional. 4-6: considered asymmetry, intentional breaks. 7-10: avant-garde, overlapping elements, unconventional grids. • MOTION_INTENSITY (default: 5) — How much animation is present. 1-3: hover states and fades only. 4-6: staggered reveals, scroll-triggered, text morphing. 7-10: magnetic cursors, parallax, complex choreography. • VISUAL_DENSITY (default: 5) — How much content fits on one screen. 1-3: spacious, luxury, breathing room. 4-6: balanced, structured whitespace. 7-10: dense dashboards, data-heavy, compact. When the user says "make it premium" or "luxury feel," drop VISUAL_DENSITY to 2-3 and MOTION_INTENSITY to 4-5. When they say "dashboard" or "admin panel," raise VISUAL_DENSITY to 7-8. When they say "make it pop" or "wow factor," raise DESIGN_VARIANCE and MOTION_INTENSITY to 7-8. ---

This gate runs BEFORE any design work, BEFORE reading references, BEFORE the anti-slop gate, BEFORE design thinking, BEFORE any code. It is the absolute first thing that happens when Picasso is invoked for any design task.