design-artifact
Establish subject-specific creative direction for an HTML artifact, including palette, typography, layout, theming, and visual register.
Skill by LumenYoung
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/lumenyoung-design-artifact
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend, agent-building
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/design-artifact
What's inside
- Skill name
design-artifact- Description
- Establish subject-specific creative direction for an HTML artifact, including palette, typography, layout, theming, and visual register. Available only when the user explicitly invokes /skill:design-artifact.
- License
- MIT
- Instructions
- 13 lines in SKILL.md · view on GitHub
Files (1)
- SKILL.md
SKILL.md (first lines)
# Effective HTML: Design Artifact ## Pi-specific adapter This adapter deliberately keeps the upstream Effective HTML workflow out of Pi's model-advertised skill list. Use it only after the user explicitly invokes `/skill:design-artifact`; do not activate it from an ordinary request. ## Load the upstream workflow Read and follow the canonical upstream workflow in full before continuing: [`SKILL.md`](../../../../skills/vendor/effective-html/skills/design-artifact/SKILL.md). The upstream repository is vendored at `skills/vendor/effective-html`, pinned by this dotfiles repository, and is distributed under its [MIT License](../../../../skills/vendor/effective-html/LICENSE). Treat this adapter as the Pi visibility boundary; do not copy or modify the vendored workflow here.
From LumenYoung/dotfiles, MIT.
More from LumenYoung/dotfiles
- 0.552score
dotfiles-maintenance
LumenYoung
Maintain this dotfiles repository: propagation rules, bootstrap behavior, agent config layout, and skill distribution across Codex, Pi, Claude, OpenCode, and…
SkillAFreshness: AClaude Code +9 - 0.524score
dotfiles-skill-creator
LumenYoung
Create or update agent skills in this dotfiles repository.
SkillBFreshness: BClaude Code +9 - 0.521score
wayfinder
LumenYoung
Plan work too large for one agent session as a durable map of decision tickets, then resolve one frontier ticket per session until the route to the…
SkillBFreshness: BClaude Code +9 - 0.519score
html
LumenYoung
Create or redesign a self-contained single-file HTML artifact for a report, explainer, landing page, presentation, tool, or mixed artifact.
SkillBFreshness: BClaude Code +9 - 0.519score
durable-document-writing
LumenYoung
Write or revise durable documentation, tutorials, how-to guides, references, explanations, ADRs, and migration guides from rich implementation context.
SkillBFreshness: BClaude Code +9 - 0.519score
html-diagram
LumenYoung
Create a self-contained HTML diagram for relationships, sequence, topology, state, hierarchy, timelines, or quantitative structure.
SkillBFreshness: BClaude Code +9 - 0.519score
html-plan
LumenYoung
Turn source material into a self-contained HTML plan, roadmap, rollout, or implementation sequence while preserving commitments and reviewability.
SkillBFreshness: BClaude Code +9 - 0.519score
html-prototype
LumenYoung
Build a self-contained, responsive HTML mockup or interactive prototype with credible product states and accessible behavior.
SkillBFreshness: BClaude Code +9 - 0.519score
html-wireframe
LumenYoung
Create a self-contained low-fidelity HTML wireframe for reviewing information hierarchy, content, navigation, task flow, and responsive structure.
SkillBFreshness: BClaude Code +9 - 0.512score
dotfiles-maintainance-update
LumenYoung
Update this dotfiles repository's maintained dependencies, especially vendored skill submodules like visual-explainer, while preserving propagation and…
SkillBFreshness: BClaude Code +9 - 0.499score
teach
LumenYoung
Teach the user a new skill or concept in a source-grounded teaching workspace across multiple sessions.
SkillBFreshness: BClaude Code +9 - 0.467score
marimo-authoring
LumenYoung
Compact marimo notebook authoring guidance to use alongside marimo-pair for script-runnable notebooks, tests, validation, and structure.
SkillCFreshness: CClaude Code +9
Signals
- Stars
- 0
- Forks
- 1
- Open issues
- 0
- Last commit (this folder)
- Aug 25, 2026 (2 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- Repository
- github.com/LumenYoung/dotfiles
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from LumenYoung
- 0.552score
dotfiles-maintenance
LumenYoung
Maintain this dotfiles repository: propagation rules, bootstrap behavior, agent config layout, and skill distribution across Codex, Pi, Claude, OpenCode, and…
SkillAFreshness: AClaude Code +9 - 0.524score
dotfiles-skill-creator
LumenYoung
Create or update agent skills in this dotfiles repository.
SkillBFreshness: BClaude Code +9 - 0.521score
wayfinder
LumenYoung
Plan work too large for one agent session as a durable map of decision tickets, then resolve one frontier ticket per session until the route to the…
SkillBFreshness: BClaude Code +9 - 0.519score
durable-document-writing
LumenYoung
Write or revise durable documentation, tutorials, how-to guides, references, explanations, ADRs, and migration guides from rich implementation context.
SkillBFreshness: BClaude Code +9 - 0.519score
html
LumenYoung
Create or redesign a self-contained single-file HTML artifact for a report, explainer, landing page, presentation, tool, or mixed artifact.
SkillBFreshness: BClaude Code +9 - 0.519score
html-diagram
LumenYoung
Create a self-contained HTML diagram for relationships, sequence, topology, state, hierarchy, timelines, or quantitative structure.
SkillBFreshness: BClaude Code +9
Cite this page
design-artifact skill. Agent Mart. https://agentmart.dev/skills/lumenyoung-design-artifact (last updated 2026-10-24)