agentleFS
Sign inStart free
Daeguk-SunDaeguk-Sun/dcNess/skills/canvas-design/SKILL.md

canvas-design

Skill1 starsChanged 4 months agoMITView on GitHub

내부 UI 기준 확보 wrapper. draft 후보 생성, 사용자 PICK, 확정본 승격, 보드·진입점 재생성을 한 경로로 수행한다. 공개 진입점이 아니며 /ux, /impl, /impl-loop 내부에서 호출된다.

197 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use academy-guide, skill-share and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • AnthropicSkill

    academy-guide

    Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

    Also in 9 projects that use this

  • ArogyaReddySkill

    skill-share

    A skill that creates new Claude skills and automatically shares them on Slack using Rube for seamless team collaboration and skill discovery.

    Also in 25 projects that use this

  • ArogyaReddySkill

    raffle-winner-picker

    Picks random winners from lists, spreadsheets, or Google Sheets for giveaways, raffles, and contests. Ensures fair, unbiased selection with transparency.

    Also in 26 projects that use this

  • zephyrwang6Skill

    topic-collector

    AI热点采集工具。从Twitter/X、Product Hunt、Reddit、Hacker News、博客等采集AI相关热点内容。当用户说"开始今日选题"、"采集热点"、"看看今天有什么新闻"、"今日AI热点"时触发。聚焦领域：Vibe Coding、Claude Skill、AI知识管理、AI模型更新、AI新产品、海外热点。

    Also in 4 projects that use this

  • zephyrwang6Skill

    deepl

    Übersetzt Texte, Dokumente und XLIFF-Dateien via DeepL API. Verwende für Übersetzungen mit /deepl translate, /deepl file oder /deepl xliff.

    Also in 4 projects that use this

  • Patrick-Git-CreatorSkill

    artifacts-builder

    Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

    Also in 47 projects that use this

  • +2 more from ArogyaReddy
  • +4 more from zephyrwang6

The file

Create a free account to mount
Files
SKILL.md

canvas-design

공개 진입점이 아니다. 외부 workflow는 /spec → /design → /impl → /acceptance를 유지한다.

목적

UI 기준을 docs/design-variants/에 남긴다. 사람은 후보를 PICK하고 생성 결과를 검수한다. 화면·전이·여정의 값과 보드 배치는 agent 산출물과 생성기가 소유한다.

산출물 계약의 진본은 docs/plugin/design-variants.md다. 이 스킬은 계약을 반복하지 않고 실행 순서와 권한만 소유한다.

입력

  • 대상 화면 ID와 관련 ux-flow
  • 기준 소스: existing-confirmed / user-provided / new-draft / skip
  • 관련 issue·impl task·design.md

실행

  1. templates/design-variants/ seed가 없을 때만 복사한다. 기존 파일은 보존한다. 단 _lib/ 엔진 4개 파일(canvas.js, only-variant.js, report-size.js, show-ids.js)이 배포본과 다르면 배포본으로 교체하고 교체한 파일을 보고한다. 프로젝트는 _lib/를 수정하지 않으므로 교체로 잃는 내용이 없고, 교체하지 않으면 엔진 수정이 기존 프로젝트에 도달하지 않는다.
  2. 기존 확정본·사용자 기준·신규 draft·skip 중 경로를 정한다.
  3. draft가 필요하면 foreground designer를 호출한다. designer는 drafts/에 확정본과 같은 형식의 후보만 만든다.
  4. 후보를 사용자에게 제시해 PICK을 받는다. NG면 다시 만들고, OK면 선택본을 같은 이름의 screens/<screen-id>.html로 이동한다.
  5. 같은 화면의 탈락 후보만 제거한다. 다른 화면 후보는 보존한다.
  6. plugin 소유 생성기 3종을 실행해 저니 보드, 변형 전수 보드, 두 진입점을 갱신한다. 이어서 세 생성기의 --check를 모두 통과시킨다.
  7. 확정본 경로, 보드 경로, 핵심 node-id, 의도적 차이를 호출자에게 반환한다.

사용자 PICK 대기 중에는 결론을 내리지 않는다.

결론

  • PASS — 필요한 PICK·승격·재생성·검사가 끝났다.
  • ESCALATE — 기준 충돌, seed 실패, 화면 ID 충돌, 사용자 중단처럼 임의 진행할 수 없다.

마지막 단락에 결론 enum 하나를 명시한다.

권한

  • designer: docs/design-variants/drafts/만 write
  • 메인: PICK, 순수 이동, 후보 정리, 생성기 실행
  • 생성기: 보드·두 진입점 전량과 프로젝트 포인터 한 줄 소유
  • 프로젝트: _lib/ 수정 금지

canvas-design은 helper begin/end-step 비대상 main-owned checkpoint다. designer Agent의 spawn/완료만 SubagentStart/PostToolUse lifecycle hook이 기록한다.

호출자

/ux, /impl, /impl-loop는 승격 절차를 복제하지 않고 이 스킬을 호출한다. design: required impl task에는 반환된 확정본과 node-id 매핑을 기록한다.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free