How do I install the Phy6 Brand Assets skill?

Run npx skillmds@latest add build-with-dhiraj/phy6-brand-assets in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Phy6 Brand Assets safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Phy6 Brand Assets?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Phy6 Brand Assets free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Phy6 Brand Assets?

build-with-dhiraj (@build-with-dhiraj) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Phy6 Brand Assets by build-with-dhiraj

Name: Phy6 Brand Assets
Author: build-with-dhiraj

Phy6 Brand Assets

phy6.ai brand asset loop — favicons, PWA icons, OG images, and visual QA grounded in the Renaissance First Principles design system. Use when generating favicons, wiring Next.js metadata/icons, syncing Claude Design with the repo, or verifying brand assets at 16/32/180px.

File contents

phy6 brand assets

Orchestrates favicon + social asset generation for phy6.ai using the repo's existing design system (not a generic template).

Source of truth (read before generating)

Asset	Path
Design tokens & rules	`brand/design-system.md`
Live CSS tokens	`src/app/globals.css` (`:root`, `@theme inline`)
Manifesto voice	`brand/manifesto.md`
Logo / mark candidates	`Design assets/Renaissance aesthetics/mila-okta-safitri-w2fiznlSojQ-unsplash.svg` (golden-ratio spiral), wordmark "phy6" in Cormorant
Next metadata	`src/app/layout.tsx`

Palette for assets: parchment #F8F3ED, ink #1A1410, lapis #1E3A8A, gold #C9A24A.

Recommended toolchain

web-asset-generator (same folder tree in ~/.cursor/skills/ and ~/.claude/skills/) — favicons, PWA icons, manifest.json, OG images, Next.js wiring.
Playwright MCP — visual verification at 16×16 / 32×32 / 180×180 on localhost.
Claude Design (native) — /design-sync and /design for full-page canvas work; no user-installable MCP. Run /update and start a new session if missing.

Do not use: e-brokenc0de/claude-design-mcp (CDP hack, breaks often).

Workflow: ship favicon + icons

0. Dependencies

python3 -m pip install Pillow

Run: python3 ~/.claude/skills/web-asset-generator/scripts/check_dependencies.py

1. Generate

Invoke web-asset-generator. Typical phy6 request:

Generate a complete web asset package for phy6.ai from the golden-ratio spiral SVG (or a lapis "6" on parchment). Include favicon.ico, apple-touch-icon, PWA 192/512, and OG 1200×630. iOS: solid parchment background — no transparency.

2. Wire Next.js App Router

Place icons under src/app/ (icon.png, apple-icon.png) or public/ per script output.
Extend metadata in src/app/layout.tsx: icons, openGraph.images, twitter.images.
Add public/manifest.webmanifest if PWA icons generated.
Keep metadataBase: https://phy6.ai.

3. Verify

Ask explicitly: "Use Playwright MCP to verify favicon at 16/32/180px on localhost."

Workflow: Claude Design round-trip

/design-sync — import this repo so canvas work uses real tokens.
Build on claude.ai/design or /design in terminal.
Hand off bundle to Claude Code for implementation.
Re-run Playwright visual checks.

phy6-specific constraints

Restraint rule: if in doubt, omit.
Favicon must read at 16×16.
After asset changes: npm run build must pass.

Stitch (optional)

Stitch MCP is available separately. Use for new screen mockups, not favicons. phy6 tokens already live in the repo.

---name: phy6-brand-assetsdescription: phy6.ai brand asset loop — favicons, PWA icons, OG images, and visual QA grounded in the Renaissance First Principles design system. Use when generating favicons, wiring Next.js metadata/icons, syncing Claude Design with the repo, or verifying brand assets at 16/32/180px.---# phy6 brand assetsOrchestrates favicon + social asset generation for **phy6.ai** using the repo'sexisting design system (not a generic template).## Source of truth (read before generating)| Asset | Path || --- | --- || Design tokens & rules | `brand/design-system.md` || Live CSS tokens | `src/app/globals.css` (`:root`, `@theme inline`) || Manifesto voice | `brand/manifesto.md` || Logo / mark candidates | `Design assets/Renaissance aesthetics/mila-okta-safitri-w2fiznlSojQ-unsplash.svg` (golden-ratio spiral), wordmark "phy6" in Cormorant || Next metadata | `src/app/layout.tsx` |**Palette for assets:** parchment `#F8F3ED`, ink `#1A1410`, lapis `#1E3A8A`, gold `#C9A24A`.## Recommended toolchain1. **web-asset-generator** (same folder tree in `~/.cursor/skills/` and `~/.claude/skills/`) — favicons, PWA icons, `manifest.json`, OG images, Next.js wiring.2. **Playwright MCP** — visual verification at 16×16 / 32×32 / 180×180 on localhost.3. **Claude Design (native)** — `/design-sync` and `/design` for full-page canvas work; no user-installable MCP. Run `/update` and start a **new session** if missing.**Do not use:** `e-brokenc0de/claude-design-mcp` (CDP hack, breaks often).## Workflow: ship favicon + icons### 0. Dependencies```bashpython3 -m pip install Pillow```Run: `python3 ~/.claude/skills/web-asset-generator/scripts/check_dependencies.py`### 1. GenerateInvoke **web-asset-generator**. Typical phy6 request:> Generate a complete web asset package for phy6.ai from the golden-ratio spiral SVG> (or a lapis "6" on parchment). Include favicon.ico, apple-touch-icon, PWA 192/512,> and OG 1200×630. **iOS: solid parchment background — no transparency.**### 2. Wire Next.js App Router- Place icons under `src/app/` (`icon.png`, `apple-icon.png`) or `public/` per script output.- Extend `metadata` in `src/app/layout.tsx`: `icons`, `openGraph.images`, `twitter.images`.- Add `public/manifest.webmanifest` if PWA icons generated.- Keep `metadataBase: https://phy6.ai`.### 3. VerifyAsk explicitly: *"Use Playwright MCP to verify favicon at 16/32/180px on localhost."*## Workflow: Claude Design round-trip1. **`/design-sync`** — import this repo so canvas work uses real tokens.2. Build on **claude.ai/design** or **`/design`** in terminal.3. Hand off bundle to Claude Code for implementation.4. Re-run Playwright visual checks.## phy6-specific constraints- Restraint rule: *if in doubt, omit.*- Favicon must read at **16×16**.- After asset changes: `npm run build` must pass.## Stitch (optional)Stitch MCP is available separately. Use for new screen mockups, not favicons.phy6 tokens already live in the repo.

Frequently asked questions