Guide

Install, choose, use

Every Tastefolio skill is a standalone folder with a SKILL.md. Your coding agent reads it before touching UI and follows that style's tokens, layout rules, component specs and pre-ship checklist.

1. Install

Pick one method. A skill's name is its folder name (for example switchboard).

/plugin marketplace add tastefolio/tastefolio.github.io
/plugin install switchboard@tastefolio

npx skills add tastefolio/tastefolio.github.io --skill switchboard

curl -L https://tastefolio.github.io/downloads/switchboard.zip -o switchboard.zip
unzip switchboard.zip -d .claude/skills/

Copy the folder anywhere your agent can read it, then reference it from AGENTS.md / rules:
"Follow skills/switchboard/SKILL.md for every UI change."

One project: put the folder at .claude/skills/<name> inside the repo and commit it so teammates get it too.
All your projects: put it at ~/.claude/skills/<name>.
Everything: /plugin install tastefolio-all@tastefolio installs every style — still use only one per project.

2. Choose a style

Start from what you are building, not from a color. Brand color is swappable in every skill; what separates the styles is layout logic, information density, typography, navigation and interaction behavior.

Style	Reach for it when	Category	Mode / density
Switchboard	Privacy, security and filtering tools, Settings-heavy SaaS and admin consoles	Product & SaaS	Light-first · Balanced
Hearth	Networking, IoT and infrastructure products, Developer platforms that want to feel human	Product & SaaS	Light-first · Dense
Atelier	Launch and landing pages that must feel premium, Creative tools, studios and agencies	Brand & lifestyle	Light-first · Airy
Stratus	Cloud, logistics and B2B platforms with many products, Persian/Arabic enterprise portals and consoles	Cloud & infrastructure	Light-first · Balanced
Ultraviolet	GPU, cloud and AI infrastructure products, Developer platforms and CLIs with a marketing site	Cloud & infrastructure	Dark-first · Balanced
Tier	Hosting, domains, VPN and SaaS subscriptions, Telecom, internet and insurance plans	Commerce & marketplaces	Light-first · Balanced
Datasheet	Electronic, industrial and lab-supply stores, B2B catalogs with thousands of SKUs and specs	Commerce & marketplaces	Light-first · Dense
Sideload	Software, font, template and asset download sites, Tutorial blogs and knowledge bases with sidebars	Editorial & content	Light-first · Dense
Shelf	App, game and media stores, Consumer catalogs browsed on phones	Commerce & marketplaces	Dark-first · Balanced
Broadsheet	News sites, magazines and long-form publishers, Reports, research portals and annual reviews	Editorial & content	Light-first · Dense
Stamp	Education, creative and hobby platforms, Indie SaaS and tools for young audiences	Product & SaaS	Light-first · Airy
Raster	Museums, galleries, festivals and cultural programs, Architecture, design and type studios	Editorial & content	Light-first · Balanced
Teletype	CLIs, build tools, CI/CD and dev platforms, API, database and infrastructure consoles	Developer & data	Dark-first · Dense
Kashi	Restaurants, tea houses, hotels and hospitality, Museums, festivals and cultural institutions	Brand & lifestyle	Light-first · Airy
Ticker	Brokerages, exchanges and trading apps, Banking, wallets and treasury tools	Developer & data	Dark-first · Dense
Clay	Wellness, meditation, sleep and health apps, Habit, journaling and personal-growth tools	Product & SaaS	Light-first · Airy
Maison	Fashion, fragrance, jewellery and beauty houses, Premium furniture, objects and design galleries	Commerce & marketplaces	Light-first · Airy
Bento	Hardware and app product pages, SaaS feature overviews and changelogs	Product & SaaS	Light-first · Balanced
Aisle	General online stores and marketplaces, Electronics, home, fashion and beauty shops	Commerce & marketplaces	Light-first · Dense
Syllabus	Online academies and course marketplaces, Bootcamps, tutoring and language schools	Editorial & content	Light-first · Balanced
Brief	Design, web and branding studios, Freelancers and small agencies with case studies	Brand & lifestyle	Light-first · Balanced
Lucent	Music, podcast and audiobook apps, Media players and creative tools	Product & SaaS	Dark-first · Balanced
Clinic	Clinics, hospitals and dental practices, Doctor-booking marketplaces and telehealth	Product & SaaS	Light-first · Balanced
Linework	Developer platforms, APIs and SDKs, Infrastructure, hosting and observability consoles	Developer & data	Light-first · Dense
Estate	Property portals and classifieds, Real-estate agencies and brokers	Commerce & marketplaces	Light-first · Balanced
Margin	Essays, magazines and literary journals, Newsletters and paid writing	Editorial & content	Light-first · Airy
Dot	Hardware launches and device stores, Smart-home, wearable and IoT companion apps	Brand & lifestyle	Light-first · Balanced
Passage	Immigration, visa and residency advisories, Study-abroad and admissions agencies	Product & SaaS	Light-first · Balanced
Rack	Cloud, VPS and dedicated-server providers, Domain registrars, DNS and CDN services	Cloud & infrastructure	Dark-first · Balanced
Sprocket	Social photo and short-video apps, Creator studios and analytics for influencers	Editorial & content	Light-first · Balanced

3. Use it

Name the style in your request, or record it in CLAUDE.md so every session follows it:

# CLAUDE.md
## Design
Use the Tastefolio "switchboard" skill for every UI change.
Brand color: #0f766e
Languages: en (LTR, default) and fa (RTL)
Stack: Next.js + Tailwind v4 + shadcn/ui

Example requests:

Using the switchboard style, build a landing page for a class-booking app:
hero, features, pricing, FAQ and a sign-up form.

Now build the signed-in dashboard for the same product:
stats summary, bookings table with filters, account settings.

Every skill covers both kinds of output: public websites (landing, pricing, blog, store) and product UI (dashboards, user panels, settings, long forms).

4. Customize without losing the style

Brand color: change only --brand; --brand-soft and --brand-strong derive from it with color-mix(). Each skill states the allowed range (e.g. minimum contrast). Every skill page lets you open the demos with a different brand color.
Content and names: change freely — the rules never depend on demo content.
Dark mode: <html data-theme="dark">. Dark-first styles also define a light mode and vice versa.
Fonts: if you must swap, use the fallbacks listed in that skill's SKILL.md.

5. Persian & right-to-left

Set <html lang="fa" dir="rtl">. Every kit uses CSS logical properties (margin-inline-start, inset-inline-end…) and mirrors automatically.
Persian is set in Vazirmatn in every style; each style tunes weight, size and line height for Persian.
Never apply letter-spacing to Persian text — it breaks letter joining. There is no italic; emphasize with weight or color.
Show numbers with Persian digits via Intl.NumberFormat('fa-IR') and dates in the Solar Hijri calendar via Intl.DateTimeFormat('fa-IR').
Mirror directional icons (arrows, chevrons); never mirror non-directional ones (search, clock).

6. React, Tailwind and shadcn/ui

references/adapters.md in every skill contains ready Tailwind v3/v4 blocks and a shadcn/ui variable mapping. kit.css is a reference implementation: port it to components in React projects and keep the token names. shadcn is welcome as long as you apply the skill's Component library overrides — otherwise you get default shadcn with new colors, not the style.

7. Add a style

skills/<name>/
  SKILL.md              # frontmatter: name, description
  meta.json             # gallery metadata (en + fa)
  assets/tokens.css     # light, dark, fa overrides
  assets/kit.css        # reference components
  assets/kit.js         # synced from shared/kit.js
  references/           # adapters.md (generated) + patterns
  examples/site.html
  examples/dashboard.html

npm install
npm run sync      # copy runtime, regenerate adapters + marketplace
npm run check     # validate every skill
npm run shots     # real screenshots of every demo
npm run build     # gallery → dist/
npm run serve     # preview dist on :4174

On every push to main, GitHub Actions re-captures all screenshots, builds the gallery, checks links and deploys to GitHub Pages.