Intrinsic Design Skill

A specialized AI agent skill designed for Claude Code, Cursor, GitHub Copilot, Windsurf, and 40+ other agents. It enforces modern, breakpoint-free responsive CSS layouts following the Intrinsic Web Design methodology.

What is this?

This skill encodes the "Intrinsic Design" methodology (based on the excellent Frontend Masters article by Amit Sheen). It teaches your AI agent to move away from using @media viewport breakpoints as the primary layout engine, and instead rely on context-aware layout primitives where content dictates the layout.

Features

The skill instructs the AI to use a four-method approach to CSS:

1. Intrinsic Layouts: Using auto-fit, minmax(), flex-wrap, and calc(infinity) instead of fixed column counts at breakpoints.
2. Fluid Values: Smooth scaling using clamp(), min(), and max() with vi units instead of stepped size changes.
3. Container Units: Using cqi and cqb for sizing relative to the component itself, not the global viewport.
4. Container Queries: Using @container for structural shifts at the component level.

It explicitly reserves @media queries exclusively for:

• Device capabilities: hover, pointer, display-mode, update, scripting.
• User preferences: prefers-color-scheme, prefers-reduced-motion, prefers-contrast, prefers-reduced-data.

Install

This skill is compatible with the Vercel skills ecosystem. You can install it using the open skills CLI.

Install into your current project:

npx skills add pagelab/intrinsic-design-skill

Install just this specific skill:

npx skills add pagelab/intrinsic-design-skill --skill intrinsic-design

Install to a specific agent only:

npx skills add pagelab/intrinsic-design-skill --agent claude-code
npx skills add pagelab/intrinsic-design-skill --agent cursor

Install globally (user-wide, across all projects):

npx skills add pagelab/intrinsic-design-skill --global

Usage

Once installed, the highly-optimized trigger description ensures that your AI agent will automatically apply these techniques anytime you ask it to refactor a grid, scale typography, adapt a responsive component without media queries, or anytime you mention fluid typography, clamp(), or Container Queries.

Repository Structure

skills/
  intrinsic-design/
    SKILL.md    # The core prompt instructions, formatting rules, and anti-patterns

Evaluation & Validation

• Modern Standards: The CSS techniques advocated here (clamp, @container, cqi, vi) have been cross-referenced with caniuse data and hold Baseline: Widely Available status across all major modern browsers.
• Agent Performance: During simulated benchmarking, this skill achieved a 100% pass rate on generating modern CSS without viewport breakpoints, compared to a 50% pass rate from baseline models. It also significantly reduces token usage by preventing the model from writing excessively verbose viewport calc() math or repetitive media query blocks.

License

MIT License