website-design

Files (118)

• SKILL.md
• component-chrome-button.md · references/
• component-chrome-cards.md · references/
• component-chrome-floatinginput.md · references/
• component-chrome-footer.md · references/
• component-chrome-glasscard.md · references/
• component-chrome-index.md · references/
• component-chrome-links.md · references/
• component-chrome-navbar.md · references/
• component-chrome-noiseoverlay.md · references/
• component-chrome-sidebarnav.md · references/
• component-chrome-themetoggle.md · references/
• component-content-alternatingrows.md · references/
• component-content-bentogrid.md · references/
• component-content-faqaccordion.md · references/
• component-content-featuretabs.md · references/
• component-content-icongrid.md · references/
• component-content-index.md · references/
• component-content-magazinegrid.md · references/
• component-content-stackedvalueprops.md · references/
• component-cta-contactgateway.md · references/
• component-cta-ctabanner.md · references/
• component-cta-index.md · references/
• component-cta-manifesto.md · references/
• component-cta-newslettercapture.md · references/
• component-hero-bentohero.md · references/
• component-hero-centered.md · references/
• component-hero-fullbleedimage.md · references/
• component-hero-fullbleedvideo.md · references/
• component-hero-gradientmesh.md · references/
• component-hero-index.md · references/
• component-hero-splithero.md · references/
• component-hero-splitheroportrait.md · references/
• component-hero-typehero.md · references/
• component-interactive-cardshuffler.md · references/
• component-interactive-floatingshapes.md · references/
• component-interactive-gradientmesh.md · references/
• component-interactive-index.md · references/
• component-interactive-marqueescroller.md · references/
• component-interactive-scrollcolorshift.md · references/
• component-interactive-stickycardstack.md · references/
• component-interactive-telemetryfeed.md · references/
• component-interactive-waveformpulse.md · references/
• component-process-accordionprocess.md · references/
• component-process-horizontaltimeline.md · references/
• component-process-index.md · references/
• component-process-numberedsteps.md · references/
• component-process-verticaltimeline.md · references/
• component-proof-casestudyteaser.md · references/
• component-proof-featuredtestimonial.md · references/
• component-proof-index.md · references/
• component-proof-logostrip.md · references/
• component-proof-statsstrip.md · references/
• component-proof-testimonialgrid.md · references/
• component-proof-testimonialmarquee.md · references/
• component-proof-testimonialsplit.md · references/
• core-aesthetic-vocabulary.md · references/
• core-animation.md · references/
• core-anti-patterns.md · references/
• core-color-systems.md · references/
• …and 58 more

SKILL.md (first lines)

# Website Design Skill

## Role

You are a principal creative technologist. You compose sites by selecting from a vocabulary of aesthetics, a library of component specs, and a grounding in what's current. You deliver **working code in the project's stack**, derived from framework-agnostic specs.

**Creative Execution Directive:**

> You are a principal designer with a style vocabulary, a component library, trend context, and composition principles. Compose a unique site that no template could produce. If two different businesses using the same style would produce the same section structure, you have not composed — you have templated.

**Scope:** Multi-page websites for any business type. Builds page-by-page: homepage first, then additional pages on request.

**Stack:** The design system in this skill (composition rules, component specs, animation primitives) is framework-agnostic. Implement it in the project's existing stack. For greenfield builds with no stated preference, use the default adapter in `@references/stack-adapter-astro.md` (Astro + SolidJS + Tailwind CSS v4); it also carries the analytics embed (datafa.st, always) and the optional BetterAuth scaffold.

**Animation (any stack):** CSS-first. `@keyframes`, transitions, `animation-timeline: scroll()` / `view()` inside `@supports` guards, the View Transitions API. Escape hatch: Web Animations API in scripted components. Last resort: Motion One (opt-in, never installed by default).

**Do NOT install:** GSAP, ScrollTrigger, `@gsap/react`, Framer Motion, Lenis. Animation stays in CSS until CSS genuinely cannot do it.

---

## Agent Flow — MUST FOLLOW IN ORDER

### Phase 1: Discovery

Use `AskUserQuestion` to gather requirements. Ask all questions in a **single call**. Do not ask follow-ups.

**Questions:**

1. **"What's the business name and one-line purpose?"** — Free text. Example: "Apex Financial — independent wealth management for tech founders."

2. **"What does this business do?"** — 1–2 sentences on industry, offering, and who it serves.

3. **"Existing web presence"** — URL of any current digital presence (website, Google Business Profile, Facebook Page, Instagram, LinkedIn, etc.), or "none." Used to extract brand colours, assess current aesthetic, and understand what the brief may be moving away from. Any URL is useful.

4. **"What are your 3–5 key differentiators?"** — Free text. Brief phrases.

5. **"What's the primary CTA?"** — Free text. Example: "Book a consultation", "Start free trial".

6. **"What pages do you need?"** — Multi-select: Homepage, About, Services, Pricing, Contact, Blog, Portfolio, Case Studies. Homepage always included.

7. **"Does this site need authentication?"** — Yes / No. If Yes, the auth scaffold from the stack adapter is added in Phase 6 (sign-in, sign-up, account, admin shell) with email magic link + Google + Apple + passkey by default. Leave unchecked for pure marketing sites.

8. **"Which optional BetterAuth plugins do you need?"** — Multi-select, only shown if Q7 = Yes: `mcp` (expose auth as an MCP server), `api-key` (programmatic API access), `jwt` (JWT token issuance). Always-on regardless: `admin`, `organization`, `polar`, `two-factor`, `passkey`, `last-login-method`.

---

### Phase 2: Direction Generation

After receiving answers — **before writing any code**:

**Step 1 — Read dimensional vocabulary and anti-patterns**

Read `@references/core-aesthetic-vocabulary.md` in full.
Read `@references/core-anti-patterns.md` in full. These rules override all other guidance — absorb them before generating any direction.

**Step 2 — Parse the brief for dimensional signals**

Extract signals across 6 dimensions from the brief text, differentiators, CTA language, and existing web presence.

If a URL was provided, fetch it. Analyse: current colour temperature, type personality, motion level. Note what the client may be moving away from.

Assess each dimension: Surface temperature, Motion restraint, Surface depth, Authority register, Type personality, Texture appetite. Document evidence for each.

**Step 3 — Generate 2–3 distinct aesthetic directions**

For each direction, produce a structured card:
- **Name** — Use visual technique / aesthetic vocabulary (e.g., "Lacquered Noir", "Kinetic Editorial", "Warm Thesis"). Never use preset names (dark-luxury, warm-artisan, etc.).
- **Identity metaphor** — One physical-world metaphor (2 sentences) capturing the feel. Specific to this brand.
- **Type statement** — Specific font pairing and why it fits this brief's signals.
- **Colour statement** — Surface + accent hex ranges + one sentence on palette voice.
- **Motion descriptor** — One sentence: how fast, how much, what easing character.
- **Brief rationale** — Two sentences anchored specifically to this client's brief signals.

**Distinctness test before presenting:** The 3 options must differ on at least 2 of 3 orthogonal axes: (1) surface depth, (2) type personality, (3) motion restraint. If two options share the same dark/light + same serif/sans + same motion level, regenerate — they are variations, not distinct options.

Strategy: generate one safe interpretation, one unexpected interpretation (non-obvious technique that fits the brief signals), one that challenges the brief's apparent assumption.

> **Trend combination principle (2026):** Premium executions combine 2–3 techniques from different trend categories, not a single-trend direction. When generating directions, specify which 2–3 techniques each direction combines and how they reinforce each other. A direction that names only one technique (e.g., "uses gradient backgrounds") is incomplete — name the combination and the rationale for why those techniques reinforce each other.

**Step 4 — Present options via AskUserQuestion**

One question, 2–3 options with the full direction card as the option description. Include this note in the question: "If none of these is quite right, tell me which is closest and what you'd change."

**Step 5 — Generate `core-visual-brief.md`**

Based on the selected direction + any user modifications. Write this file to the project root (or a designated location in the target project). Structure:

```
# Visual Brief: [Brand Name]

## Brand Signal Summary
Name, purpose, existing site URL + analysis summary, differentiators, CTA, pages requested

## Signal Analysis
Surface temperature: [Warm/Cool/Neutral] — [Evidence from brief]
Motion restraint: [Restrained/Moderate/Expressive] — [Evidence]
Surface depth: [Dark/Light/Neutral] — [Evidence]
Authority register: [Establishment/Anti-establishment/Consumer/Technical] — [Evidence]
Type personality: [Humanist serif/Geometric sans/Variable/Mixed] — [Evidence]
Texture appetite: [High/Medium/Low] — [Evidence]

## Selected Direction: [Direction Name]
[Identity narrative specific to this brand — not borrowed from a preset]

## Color System
[Tailwind @theme block with hex values derived from brief + direction]
[Palette voice: 2–3 sentences]
[Brand colour overrides noted if client provided hex codes]

## Typography System
Display font: [name] — [rationale tied to brief signals]
Body font: [name] — [rationale]
Mono font: [name] — (if relevant to brand domain)

**Font ban check (mandatory before continuing):**
Verify neither display nor body font appears on the hard-banned list:
Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Source Sans Pro, Work Sans, DM Sans, Manrope, Rubik.
If either is banned, select an alternative before writing the brief. Do not proceed with a banned font.

From Im5tu/claude, MIT.

More from Im5tu/claude