agentleFS
Sign inStart free
drewka585drewka585/deece-skills/skills/premium-web/SKILL.md

premium-web

Skill1 starsChanged 2 months agoMITView on GitHub

Design and build a premium website, landing page or UI screen the DeeCe way: pull real references first (styles.refero.design design systems, 21st.dev components, collectui.com motion shots, the Dribbble teardown library), derive tokens from them plus the brand, pick a scroll-craft page grammar and signature move, reuse ui-library / 21st.dev components before writing, and verify by scrolling. Use when Drew says "build a website", "landing page", "make this page look better / premium / less AI", "website inspiration", "what does refero have for X", "find a component on 21st.dev", "tear down this dribbble shot", "what is on collect ui for X", or starts any new UI build.

  • Reads credentials

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Pull references: Never design from memory.

    line 15
  2. Very specific:

    READ every sheet and screenshot.

    line 27

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

premium-web

The wrapper for directives/premium_website_design.md. Read that directive in full before Phase 1; this file is the checklist and the commands.

Do, in order

  1. Brief. Product, audience, pages, brand assets, references named element by element.
  2. Pull references. Never design from memory.
    python3 execution/refero_styles.py search "finance"                 # north-star lines per site
python3 execution/refero_styles.py get <uuid> --sheet               # design.md + tokens.css + tailwind preset + preview sheet
python3 execution/refero_styles.py similar <uuid>
python3 execution/twentyfirst_dev.py search "hero with scroll-driven card"
python3 execution/twentyfirst_dev.py sheet <demo_id>                # desktop + mobile screenshots of the live demo
python3 execution/collectui.py categories --grep hero               # ~200 category slugs
python3 execution/collectui.py list landing-page --limit 20         # curated shots, mostly video
python3 execution/collectui.py sheet <post_id>                      # 4x4 contact sheet of the motion
python3 execution/dribbble_teardown.py <shot url>                   # contact sheet of the shot video
    READ every sheet and screenshot. Read directives/references/design_inspiration/README.md first; four Dribbble shots and two Refero finance systems are already torn down there.
  3. Design system. Brand tokens win; Refero + ui-ux-pro-max fill the rest; apply the scroll-craft taste floor (.claude/skills/scroll-craft/references/taste.md) and its refuse list. Write design-system/MASTER.md + REFERENCES.md in the project.
  4. Structure. scroll-craft Step 0-2: interview -> BRIEF.md, ONE of eight grammars, feeling curve + one peak, a signature move, the fingerprint gate against websites/scrollcraft/FINGERPRINTS.md, then the act/device score.
  5. Components. ui-library/ first; then twentyfirst_dev.py prompt <demo_id> --library (needs API_KEY_21ST in .env, free at https://21st.dev/mcp); then canvas-ui; write last. Swap hardcoded accents for tokens.
  6. Motion. scroll-craft engine (data-sc-* on real HTML) for scroll-driven pages, scroll-film-studio for a full film, reveal-on-enter for ordinary pages. Transform / opacity / clip-path only. User-paced, never autoplay or scroll-jack.
  7. Verify. /test-improve desktop + mobile, --scroll-sweep 10 read frame by frame, the scroll-craft harness for dead scroll and composited contrast, the feel check, a hard scroll to top and bottom, tab order. Say what a green run does not cover.
  8. File it. New reference -> teardown README. New component -> ui-library README. Shipped build -> FINGERPRINTS.md row.

Never

  • Design from memory, or from adjectives.
  • Ship the same six sections every AI page has (feature-card grid, 01/06 counters, scroll cue, gradient text, aurora purple, pill everything).
  • Report visual work done without having read the screenshots.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free