Communitygithub.com

Luijaa/web-template

Design a new system or a large feature before any code — interview in rounds, write docs/design/<slug>.md from the template, ADRs and glossary, run make docs-check, and open a docs-only PR for approval. Use when asked to design something, or when /new-feature finds the feature is large.

What is web-template?

web-template is a Claude Code agent skill that design a new system or a large feature before any code — interview in rounds, write docs/design/<slug>.md from the template, ADRs and glossary, run make docs-check, and open a docs-only PR for approval. Use when asked to design something, or when /new-feature finds the feature is large.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Luijaa/web-template/tree/HEAD/.agents/skills/design
View original→Browse all skills

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Design: $ARGUMENTS

ทำตาม docs/design-process.md ทุกขั้น — ไฟล์นั้นคือกติกา skill นี้แค่ลำดับงาน ถ้าขัดกันให้ยึดไฟล์นั้น

  1. ต้อง design ไหม — เทียบกับตารางหัวข้อ 1 ของ docs/design-process.md
    • ไม่ต้อง: บอกเหตุผล 1 บรรทัด แล้วกลับไปใช้ new-feature
    • ไม่แน่ใจ: ถามคนก่อน
  2. เริ่ม (หัวข้อ 3.0): epic issue (label design), branch docs/<id>-design-<slug>, คัดลอก docs/design/template.md → docs/design/<slug>.md (system.md หรือ <เลข epic>-<slug>.md) ตั้ง status: draft และเพิ่มแถวใน docs/design/README.md
  3. อ่านก่อนถาม: CONTEXT.md, docs/adr/, docs/architecture.md, design อื่นใน docs/design/ — ข้อเท็จจริงที่หาเองได้ไปหาเอง ห้ามถาม
  4. สัมภาษณ์เป็นรอบ (หัวข้อ 3.1) รูปแบบ Qn — หัวข้อ: คำถาม + แนะนำ: … ทุกข้อ, เหตุการณ์ขอบ 1–2 ข้อทุกรอบ — เดินกิ่ง A–H (หัวข้อ 3.2) ให้ครบ และหยุดรอคนที่จุดอนุมัติ 1, 2 (system), 3
  5. เขียนลงไฟล์หลังทุกรอบ: หัวข้อในไฟล์ design, คำใหม่ใน CONTEXT.md, ADR proposed ใน docs/adr/ (+ ดัชนี), รูป C4 ใน docs/architecture.md ถ้า container/ระบบภายนอกเปลี่ยน
  6. ตรวจ (หัวข้อ 3.3): make docs-check ต้องผ่าน (repo ที่ Makefile ยังไม่มี target นี้: python3 <path ของ web-template>/scripts/check-docs.py <repo> — ทีม Hermes: /home/opc/projects/web-template) + เช็คลิสต์ด้วยตัวเอง แล้วตั้ง status: proposed
  7. PR เอกสารอย่างเดียว: docs(design): <slug>, body มี Refs #<epic>, สรุปทางเลือกที่ยังเปิด และหัวข้อ ## CHANGELOG เป็น - — ห้ามมีโค้ด ห้าม merge
  8. อนุมัติ (หัวข้อ 3.4): เมื่อคนอนุมัติ commit status: approved + approved-by + ADR เป็น accepted ใน PR เดียวกัน (make docs-check ต้องผ่าน) แล้วให้คน merge
  9. หลัง merge (หัวข้อ 3.5): เปิด issue ย่อยตามหัวข้อ 13 ทีละชิ้น แต่ละใบลิงก์ epic และไฟล์ design — งานโค้ดเริ่มด้วย new-feature

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Luijaa/web-template

Fix a reported bug or failing test — reproduce it as a failing test first, trace the fail path, try to disprove each hypothesis, keep an experiment log, fix the root cause, look for the same bug elsewhere, and record root cause and why it slipped through in the PR. Use when a bug is reported, something is broken or throwing, a test or CI job fails, or an error log or stack trace is pasted.

Luijaa/web-template

Start a new feature end-to-end in this repo — clarify requirements, plan, branch, implement with tests, and prepare a PR. Use when asked to add a feature, page, or endpoint.

Luijaa/web-template

Run the full pre-PR checklist (make check, secret scan, docs, diff review) before opening or updating a pull request. Use before creating a PR or when asked if work is ready.

Luijaa/web-template

Review a pull request or branch diff against main — read-only. Checks intent and simpler alternatives, traces real code paths beyond the diff, then runs the repo checklist (CI, tests, authz and user-supplied ids, dependencies and EOL, security, audit/session/health, UI/i18n, design, bug-fix evidence, core rule files) and reports must-fix items with evidence and a one-line verdict. Use before opening a PR, when asked to review, or when assigned a review card.

Related Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community