# Fiord Design Library — Cursor Rules Fiord is an AI-native Tailwind component library at https://fiord.design. Components are self-contained HTML with Tailwind CDN classes, organized by aesthetic (visual identity). You fetch markup directly — there is no package to install. ## When to Activate Use this protocol whenever the user asks for UI components, page sections, frontend markup, Tailwind-based design, page layouts, or any visual/frontend work where a component library would help. ## Discovery Protocol Always follow these steps in order. ### 1. Fetch the Manifest Fetch `https://fiord.design/manifest.json` to get the full component catalog, available aesthetics with descriptions, and URL paths. Read it fully before proceeding. ### 2. Select an Aesthetic An aesthetic is a complete visual identity, not a theme toggle. If the user specified one, use it. If not, recommend one based on project context (domain, tone, existing design) and confirm with the user. Aesthetic descriptions are in the manifest under `"aesthetics"`. ### 3. Fetch the Design Language Fetch `https://fiord.design/aesthetics/{name}/meta.json` to get the aesthetic's palette, typography, spacing, borders, shadows, and motion tokens. You will need these to extrapolate when building custom components. ### 4. Identify Needed Components Match the user's task to components in the manifest's `"categories"` array. Identify only what the current task requires — most page builds use 3–8 components. To understand the aesthetic's design language, use `meta.json`; do not fetch component files for that purpose. Use the aesthetic's component path when available: `https://fiord.design/aesthetics/{name}/components/{component}.html`. Fall back to base: `https://fiord.design/base/components/{component}.html`. ### 5. Fetch and Integrate Components One at a Time Fetch one component, extract and integrate it, then move to the next. Do not batch-fetch all components before starting — each file is ~130 lines and loading them all upfront wastes context. The full page includes preview chrome and CDN scripts for human browsing — ignore those. ### 6. Extract Markup Extract the markup between `` and ``. For interactive components (modals, drawers, tabs, tooltips, dropdowns, FAQs), also extract the optional JS block between `` and ``. ### 7. Integrate Paste extracted markup into the codebase. Apply framework adaptations: - **React/JSX:** `class` -> `className`, `for` -> `htmlFor`, self-close void elements, replace inline scripts with hooks. - **Vue/Svelte/Astro:** HTML is largely compatible. Move inline scripts to framework `