agent-skills

Use when you have a website goal and want to improve, build, or fix it. Accepts screenshots, descriptions, URLs, or vague ideas. Diagnoses what's needed, coordinates the full design pipeline (research → personas → references → architecture → design → visual identity → build → testing), and maintains a shared ux.md file for visibility. The friendly entry point — no UX jargon required.

Use after audience-site-brief Phase 6 (UX design optimization) to plan conversion experiments. Produces a prioritized test backlog using the PIE framework (Potential, Importance, Ease), hypothesis templates, and persona-calibrated CTA variants. Run before launch to identify what to validate first, not what to guess at.

Use when a user wants a landing page and provides only a text description of their goal or brand — no reference site. Produces an audience strategy, page architecture, copy direction, and a build prompt ready for motion-web-design. If the user has a URL and screenshots, use site-to-build-prompt instead.

Use after visual-identity is complete and a build prompt exists (from audience-site-brief). Scaffolds a Vite + GSAP + Lenis project, implements the design system, builds all page sections with choreographed animations, sources images from Unsplash, and documents video slots for Replicate. Targets Awwwards-quality execution.

Use after ux-methodology-design is complete. Defines brand personality keywords, explores typography, expands the color system, and locks a motion vocabulary before any code is written. Outputs design-system.md ready for motion-web-design. Award-winning studios run this phase before implementation.

Use when you need to understand your target audience before building personas. Identifies the right research sources for any audience segment, searches for real pain points, barriers, language, and decision criteria. Outputs research synthesis that grounds personas in evidence, not assumptions.

Use when defining a target audience, buyer persona, or ICP. Applies layered psychological and behavioral frameworks (Big Five, Enneagram, Jung, VALS, DISC) to identify who the audience is, how they decide, what messaging resonates, and what UX or motion style fits them.

Use after researching your audience. Finds 3–5 successful sites serving that audience using real signals (user reviews, market data, engagement) instead of search ranking. Analyzes their UX patterns, copy approaches, and visual strategies. Outputs validated reference patterns that inform your site architecture and design.

Use after page architecture is finalized. Applies laws of UX that optimize presentation: visual hierarchy, interaction design, accessibility, and performance. Shapes HOW to display existing content for maximum clarity, usability, and delight — not WHAT content exists.

Use after audience research and reference site analysis. Applies laws of UX that determine page structure, section order, and user flow. Informs WHAT sections exist and HOW they're sequenced — not visual design. Output is refined page architecture ready for design optimization.

Follow the CAS operational loop — 8 phases per session - Boot, State Ingestion, World-Model Update, Prediction, Action, Evaluation, Learning, Commit. Use when running as a CAS agent to satisfy the spec (SPEC-FOR-CONSCIOUS-AGENTIC-SYSTEM.md).

install, integrate, remove, and troubleshoot a reusable dom inspector overlay component for nextjs or react apps. use when asked to add the inspector overlay, wire it into app.tsx, app/layout.tsx, or similar root wrappers, explain setup, uninstall it, or troubleshoot installation of the inspector-overlay skill. this skill uses the reference component in references/LlmInspectorOverlay.tsx as the source of truth for the implementation to copy into the target project.

Create or update CAS persistence for an agent — STATE, append-only telemetry, raw capture, optional archival, and tests. Use when adding CAS storage to a new or existing agent. How to run the loop lives in cas-operational-loop.