gongshichen/luminacode/frontend-implementation-plan

Claude Code and agent skill by gongshichen/luminacode

Trust tier 2
  • community
LLM review pending
Source check pending

Checking that the SKILL.md file is still in the repository.

Plan user-facing state, rendering, interaction, and integration changes for any interface stack.

Install

npx vskill@latest install gongshichen/luminacode/frontend-implementation-plan

SKILL.md

Write the plan as <project_root>/FRONTEND_PLAN.md.

Size guidance:

  • Small CLI/TUI/single-screen work: 60-140 lines.
  • Medium feature: 120-220 lines.
  • Large app or multi-platform work: expand only where the design/contract requires it.
  • Keep the plan actionable: files, state, command/view structure, contract consumption, and tests. Do not restate the whole PRD or UX document.

Inputs:

  • PRD.md
  • UX_DESIGN.md
  • INTERFACE_CONTRACT.md or an A2A contract draft that must be persisted.
  • Existing frontend code/conventions, if any.

Required sections:

  1. Surface and stack
  • Web/mobile/desktop/CLI/TUI/docs/plugin surface.
  • Existing conventions, files, framework, or no-framework choice.
  • Accessibility and platform constraints.
  1. User flows and states
  • Happy path.
  • Loading, empty, validation error, server/network error, success, disabled/submitting state.
  • Focus, keyboard, and screen-reader behavior when relevant.
  1. Structure
  • Pages/routes/screens/components or command/view layout.
  • File structure.
  • Ownership of local state and derived display state.
  1. Contract consumption
  • Exact backend/API/storage/tooling contract consumed.
  • Request/response mapping.
  • Error mapping.
  • For CLI/TUI/local tools with persistence, how subprocesses receive isolated storage during integration tests: environment variable, current working directory convention, config file, fixture path, or command option from the contract.
  • Why the implementation is not direct-file, mock-only, or independent.
  1. Implementation steps
  • Ordered steps that fit frontend ownership.
  • What must wait for backend/contract confirmation.
  • Integration points to verify with Backend.
  • Verification helpers must stay inside expected artifacts. Do not create temporary scripts or extra test files during implementation unless Team Leader included them in expected artifacts.
  1. Test and smoke plan
  • Unit or simple logic checks.
  • Integration smoke against real backend/API.
  • Subprocess-based tests must use mechanisms visible to the subprocess. Do not rely on monkeypatching in-process module globals to isolate storage or backend state.
  • Do not accept a backend function parameter as subprocess isolation unless the user-facing CLI/API exposes it through the durable contract.
  • If INTERFACE_CONTRACT.md does not define a subprocess-visible storage override for a local persistent tool, stop and ask Team Leader/Backend to fix the contract instead of inventing test-only monkeypatches.
  • Manual UX checks.
  • Accessibility checks.
  1. Risks and assumptions
  • Missing design/contract details.
  • Browser/platform compatibility.
  • Performance or data-volume concerns.

Do not include backend internals except for the contract you consume. If the contract is not durable, request or create INTERFACE_CONTRACT.md before implementation.

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewNot runA model review is scheduled for the next rescan.

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

Source

Popularity

7-day trend score
0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/gongshichen/luminacode/frontend-implementation-plan/badge)](https://verified-skill.com/skills/gongshichen/luminacode/frontend-implementation-plan)

Something wrong with this skill or its page? Tell us.