Към всички skills

html

plannotator · Дизайн

Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation, tool, mixed artifact, or broad request. This is the collection's only implicit router. Route clear wireframe, prototype, mockup, plan, or diagram requests to the matching direct-invocation specialist when available. Do not use for ordinary application implementation when a stand

Оригинален текст · няма потвърден превод на български

Теми: agent-skills · claude-code · codex · html-artifacts · html-prototype · html-wireframe · prototyping · skills

Първо прочетете инструкцията.

Файлът се зарежда от посочения източник само по ваше действие. Можете да го прочетете тук, да го копирате или да го запазите като .md.

Оригинален SKILL.md
GitHub хранилище
Звезди на репото
3276
Лиценз
MIT
Последна проверка на записа
22.09.2026 г.

Добавете в своя инструмент.

Командата отваря избора на skills от репозитория. Прочетете файла и условията на автора преди изпълнение.

npx skills add plannotator/effective-html

Страницата копира текст. Не инсталира и не изпълнява нищо на устройството ви.

Откъс от SKILL.md

Началото на файла на автора, без превод.

HTML

Build one self-contained HTML file that makes the subject clearer, easier to use, or easier to understand. The standard is consistent care, not a consistent look. Do not reproduce a house palette, typography stack, card system, or layout from prior runs.

Route the request first

Use the narrowest skill that owns the main review question:

  • Read and compose design-artifact with the chosen workflow when palette, type, composition, theming, or overall visual register remain open. It provides creative direction; it does not replace the specialist that owns fidelity, structure, or behavior.
  • Read and follow html-wireframe when structure, information hierarchy, navigation, or task flow is still unsettled. It should remain visibly low fidelity and may compare two or three layout directions.
  • Read and follow html-prototype when the user needs a polished mockup or a working interactive flow. A mockup is the static fidelity mode inside that skill.
  • Read and follow html-plan when the artifact is primarily a plan, roadmap, implementation sequence, or rollout document whose source commitments must remain easy to verify.
  • Read and follow html-diagram when relationships, sequence, topology, state, hierarchy, or system behavior are the main content.
  • Continue with html for reports, explainers, presentations, landing pages, data stories, tools, and mixed artifacts that do not have a clearer owner.

These sibling links are the nesting mechanism when the collection is installed together. If a specialized skill is unavailable, continue here and load the closest reference below. Do not make the user install another skill before completing the request.

Read the room before designing

Inspect the user's request and any material they supplied. When working in a repository, look for its design language in AGENTS.md, CLAUDE.md, design-system documentation, tokens, existing components, and nearby artifacts.

Authority runs in this order:

  1. The user's explicit visual and functional instructions.
  2. The project's established design system and conventions.
  3. The subject matter, audience, and purpose of this artifact.
  4. Your own design judgment.

Before coding, settle five things in working notes:

Целият SKILL.md в GitHub