Tastefolio

Distinct, production-ready design-language skills for AI coding agents. Each skill is a standalone SKILL.md folder that teaches an agent one complete visual language — tokens, layout logic, typography, components, interaction and a pre-ship checklist — for both public websites and dashboards / user panels, in English (LTR) and Persian (RTL).

Gallery: https://tastefolio.github.io · فارسی: https://tastefolio.github.io/fa/ · Guide: https://tastefolio.github.io/guide/ · README به فارسی

• 30 styles that differ in layout logic, density, typography, navigation and interaction — not just in color.
• 60 working demos (a site and a dashboard per style) with real menus, tabs, filters, forms, dialogs and charts, all switchable between English and Persian, light and dark, and any brand color.
• Real screenshots of every demo in the gallery, captured automatically on every deploy.
• Framework-free: plain HTML/CSS plus a tiny shared runtime, with Tailwind v3/v4 and shadcn/ui mappings for each style.

The styles

#	Skill	Category	Default	Density	Look & feel	Demos
1	Switchboard · page	Product UI	light	balanced	Calm, settings-first utility UI where every option is one clear switch	site · dashboard
2	Hearth · page	Product UI	light	dense	Warm technical clarity — paper canvas, ink buttons, mono labels, honest tables	site · dashboard
3	Atelier · page	Brand & culture	light	airy	Gallery-grade product marketing — huge tight type, serif-italic accents, glass and motion	site · dashboard
4	Stratus · page	Infra & cloud	light, fa-first	balanced	Persian-first enterprise platform — product mega menu, split headlines, rail + sub-nav consoles	site · dashboard
5	Ultraviolet · page	Infra & cloud	dark, fa-first	balanced	Dark-first infrastructure for AI — indigo space, violet light, glowing edges and isometric hardware	site · dashboard
6	Tier · page	Commerce	light, fa-first	balanced	Plan-driven commerce — domain search, billing toggles, savings ribbons and a tidy client area	site · dashboard
7	Datasheet · page	Commerce	light, fa-first	dense	Engineering catalog — parametric filters, mono part numbers, LED stock dots and seven-segment readouts	site · dashboard
8	Sideload · page	Content & media	light, fa-first	dense	Content & downloads hub — post cards, sidebar widgets, download boxes with mirrors and versions	site · dashboard
9	Shelf · page	Commerce	dark, fa-first	balanced	Consumer app-store shelves — squircle icons, snap carousels, bright pills and a playful night canvas	site · dashboard
10	Broadsheet · page	Content & media	light	dense	Newspaper editorial — nameplate, column rules, kickers and decks, a newsroom built from typography	site · dashboard
11	Stamp · page	Product UI	light	airy	Playful neo-brutalism — thick ink outlines, hard shadows that press, flat sticker colors	site · dashboard
12	Raster · page	Content & media	light	balanced	Swiss grid system — black, white, one red, giant grotesk numerals and a visible 12-column grid	site · dashboard
13	Teletype · page	Dev & data	dark	dense	Terminal-native UI — one monospace face, box-drawn panes, [ bracketed ] controls and a status bar	site · dashboard
14	Kashi · page	Brand & culture	light, fa-first	airy	Persian heritage — girih stars, pointed arches, tile friezes and inscription-like titles on plaster ivory	site · dashboard
15	Ticker · page	Dev & data	dark, fa-first	dense	Market workspace — hairline mosaics, monospace tabular numbers, green/red only for up and down	site · dashboard
16	Clay · page	Product UI	light	airy	Soft, tactile wellness — puffy clay surfaces, pastel tiles, controls pressed into the page	site · dashboard
17	Maison · page	Commerce	light	airy	Quiet luxury — Didone display, spaced small caps, hairlines and a great deal of ivory	site · dashboard
18	Bento · page	Product UI	light	balanced	Modular modern — every idea in its own rounded tile on one calm grid	site · dashboard
19	Aisle · page	Commerce	light, fa-first	dense	Modern store — big search, mega menu, coral deal rails and product cards that turn into steppers	site · dashboard
20	Syllabus · page	Content & media	light, fa-first	balanced	Online academy — navy graph-paper heroes, highlighter actions, curriculum with free previews and a real lesson player	site · dashboard
21	Brief · page	Brand & culture	light, fa-first	balanced	Design & build studio — wide display type, an ink stage for the work, scrolling browser frames and a client portal with pinned feedback	site · dashboard
22	Lucent · page	Product UI	dark, fa-first	balanced	Liquid glass — refracting capsules over an aurora that takes its colours from what is playing	site · dashboard
23	Clinic · page	Product UI	light, fa-first	balanced	Healthcare booking — search-first hero, doctor cards with free slots, a time picker and a patient panel set in a hyperlegible face	site · dashboard
24	Linework · page	Dev & data	light	dense	Hairline technical — a page ruled by 1px lines with crosshairs, ink as the only brand, mono labels and a developer console	site · dashboard
25	Estate · page	Commerce	light, fa-first	balanced	Property listings — stone paper, moss actions, serif prices, a list + map split with price pins and an agent panel with a lead pipeline	site · dashboard
26	Margin · page	Content & media	light, fa-first	airy	Long-form reading — warm paper, a narrow serif column, numbered sidenotes in a wide margin, a reader's highlighter and a quiet writer studio	site · dashboard
27	Dot · page	Brand & culture	light, fa-first	balanced	Dot-matrix hardware — paper or black, one LED red, display type made of dots, a drawn device with a live 15×15 face and a device app with a glyph composer	site · dashboard
28	Passage · page	Product UI	light, fa-first	balanced	Travel documents as an interface — guilloche security paper, boarding-pass program cards, rubber stamps for milestones, a points check and a client portal built like a passport	site · dashboard
29	Rack · page	Infra & cloud	dark, fa-first	balanced	Servers you can almost touch — graphite rack-unit faceplates, status LEDs, glowing VFD readouts, one power-button orange and faders that build a VPS like a mixing desk	site · dashboard
30	Sprocket · page	Content & media	light, fa-first	balanced	A social photo network made of analog film — posts as photo prints with a date imprint, reels on a sprocket strip, profiles as contact sheets with grease-pencil picks and a red-safelight darkroom mode	site · dashboard

Demos accept ?lang=fa, ?theme=dark and ?brand=ff5a36 (any hex) so you can check a style against your own brand.

Install

Pick one method. A skill's name is its folder name (e.g. raster). Use one style per project.

Claude Code plugin marketplace

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

/plugin install tastefolio-all@tastefolio installs every style at once.

Skills CLI (agents that support the open SKILL.md format)

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

Manual

Copy skills/<name>/ to .claude/skills/<name>/ in your repo (shared with the team) or to ~/.claude/skills/<name>/ (all your projects). Zips are published at https://tastefolio.github.io/downloads/<name>.zip, and everything at tastefolio-skills.zip. For tools without skill support, add the skill's SKILL.md to the project rules or point the agent at it.

Choose a style

Start from what you are building, not from a color — every style takes your brand color.

If you are building…	Start with
A settings-heavy SaaS, privacy or utility product	Switchboard
Developer infrastructure with honest, technical copy	Hearth · Teletype
A product launch that must look gallery-grade	Atelier
A Persian-first enterprise or cloud platform	Stratus
AI / GPU / infrastructure with a dark identity	Ultraviolet
Hosting, plans and a client area	Tier
An engineering or parts catalog	Datasheet
A content, downloads or resources hub	Sideload
An app store, games or media shelves	Shelf
News, magazines and editorial products	Broadsheet
Education, community or a playful brand	Stamp
Culture, architecture, schedules and timetables	Raster
Hospitality, heritage, crafts with a Persian voice	Kashi
Trading, banking, analytics	Ticker
Wellness, habits, kids and family	Clay
Luxury fashion, fragrance, objects, boutique services	Maison
A modern product page or a dashboard of widgets	Bento
A big online store, grocery delivery or marketplace	Aisle
Online courses, academies and student panels	Syllabus
A design studio, agency or freelancer with a client portal	Brief
Music, podcasts, media players, premium consumer apps	Lucent
Clinics, doctor booking and patient portals	Clinic
Developer platforms, APIs, docs and consoles	Linework
Property listings, agencies and agent CRMs	Estate
Essays, newsletters, long reads and writing tools	Margin
Hardware, gadgets, smart-home and companion apps	Dot

Use it

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

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

Example requests:

Using the raster style, build a landing page for an architecture festival:
hero, program with filters, speakers, tickets and a newsletter form.

Now build the organizer dashboard for the same festival:
KPIs, ticket sales chart, attendee table with search, settings.

The agent reads the skill's identity rules, tokens and patterns, uses the kit (or maps it onto your stack with references/adapters.md) and checks its work against the pre-ship checklist.

Inside a skill

skills/raster/
├── SKILL.md                  # identity rules, tokens, patterns for sites and dashboards, RTL, a11y, checklist
├── meta.json                 # gallery metadata (en + fa)
├── assets/
│   ├── tokens.css            # required: semantic tokens, dark theme, Persian overrides
│   ├── kit.css               # reference components for this style
│   └── kit.js                # shared runtime (copied from shared/kit.js)
├── references/adapters.md    # Tailwind v4 @theme, Tailwind v3 config, shadcn/ui variable mapping
└── examples/
    ├── site.html             # public website demo
    └── dashboard.html        # dashboard / user panel demo

A style that needs behaviour of its own ships it as an extra asset next to the kit — Dot's assets/matrix.js draws its LED matrix and glyph editor.

Every tokens.css uses the same semantic names (--canvas, --surface, --ink, --line, --brand, --success…, --chart-*, --font-*, --fs-*, --space-*, --radius-*), so the kits, adapters and charts work identically across styles while each style sets its own values and rules.

Customize without losing the style

• Brand color: change --brand only; --brand-soft / --brand-strong derive from it. Each SKILL.md states the allowed range.
• Dark mode: <html data-theme="dark"> (dark-first styles also ship a light theme).
• Persian & RTL: <html lang="fa" dir="rtl">. Kits use CSS logical properties and mirror automatically. Persian is set in Vazirmatn in every style; numbers use Persian digits and dates the Solar Hijri calendar via Intl.
• Frameworks: references/adapters.md maps the tokens to Tailwind v4 (@theme inline), Tailwind v3 and shadcn/ui.

The shared runtime

shared/kit.js (≈50 KB, ≈16 KB gzipped, no dependencies) powers every demo through declarative attributes: language and theme switching, tabs, pressed groups, switches, dialogs and drawers, filters and live search, table sorting, form validation, multi-step wizards, steppers, conditional fields, carousels, toasts, command palettes and hotkeys, copy buttons, Intl number/date formatting (Persian digits, Jalali dates, durations) and SVG charts — line, area, bar, stacked, sparkline, donut and candlestick. The header comment of the file documents every hook.

Develop

Requires Node 20+.

npm ci
npx playwright install chromium
npm run dev

npm run dev serves the repo at http://localhost:4173 — open /skills/<name>/examples/site.html.

Script	What it does
npm run sync	copies shared/kit.js into every skill, regenerates references/adapters.md and .claude-plugin/marketplace.json
npm run check	validates every skill: required files, frontmatter, meta.json, demo wiring, marketplace
npm run shots	captures desktop and mobile screenshots of every demo in both languages (Playwright)
npm run build	builds the gallery into dist/ (English + Persian pages, zips, catalog.json, llms.txt, sitemap); with GITHUB_TOKEN set it also reads each skill's 👍 votes for the Top rated order
npm run linkcheck	verifies every internal link and asset in dist/
npm run test:gallery	drives the built gallery in Chromium: filters, search and counts, the screenshot viewer, install tabs, the phone menu, and no sideways scrolling at 320px and 390px
npm run ci	all of the above, in order — the same pipeline GitHub Actions runs
npm run serve	serves dist/ at http://localhost:4174

Every push to main runs that pipeline and deploys the gallery to GitHub Pages (.github/workflows/pages.yml). It also runs every hour to pick up new votes: every card and skill page has a 👍 vote and comments box (GitHub Discussions through giscus), and the gallery's Top rated order counts the 👍.

Adding a style: create skills/<name>/ with the files above (copy an existing skill as a starting point), give it its own identity rules, build both demos with the skill itself, then run npm run ci and look at the screenshots.

License

MIT. Fonts and icon sets are loaded from Google Fonts and jsDelivr under their own open licenses (SIL OFL / MIT). All brands, people and data in the demos are fictional samples.