gongshichen/luminacode/frontend-implementation-plan
Claude Code and agent skill by gongshichen/luminacode
Trust tier 2
- community
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-planSKILL.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.mdUX_DESIGN.mdINTERFACE_CONTRACT.mdor an A2A contract draft that must be persisted.- Existing frontend code/conventions, if any.
Required sections:
- Surface and stack
- Web/mobile/desktop/CLI/TUI/docs/plugin surface.
- Existing conventions, files, framework, or no-framework choice.
- Accessibility and platform constraints.
- 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.
- Structure
- Pages/routes/screens/components or command/view layout.
- File structure.
- Ownership of local state and derived display state.
- 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.
- 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.
- 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.mddoes 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.
- 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
- SKILL.md in the repositoryChecking.Lumina/TEAM/product-development/frontend/skills/frontend-implementation-plan/SKILL.md
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
[](https://verified-skill.com/skills/gongshichen/luminacode/frontend-implementation-plan)