SCP Screenshot to Frontend Page Generator
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md to install @user_d4891e98/ed666.
About this skill
Problem
In aheadofcow_web-style React + Ant Design admin projects, turning a UI screenshot into a working page often drifts: table columns are inconsistent, button variants are arbitrary, routes are missed, list pages lack mocks, and edits may accidentally touch backend_transaction/. This skill constrains screenshot-to-page generation to a repeatable frontend-only flow.
How It Works
It operates inside /home/admin/codespace/scp/aheadofcow_web and only modifies the frontend tree:
- Image analysis: uses visual understanding to identify the page title, table columns, filters, and action buttons; if the
imagetool fails, it continues from the screenshot manually. - Code generation: creates
src/views/pages and components using Ant DesignTable,Button,Input,DatePicker, and related rules. - Routing and mocks: updates
src/router/index.js; for list pages, generates 15 mock rows with uniqueidvalues, filtering, and pagination. - Compile check: verifies webpack output and reports the created or modified files.
Boundaries
It does not generate src/api/ files, import @/api/ modules, or modify backend_transaction/ controllers, services, DAOs, or database configuration. Generated permission codes are frontend usages only; backend menu and permission setup remains out of scope.
Use Cases
- Given an admin list-page screenshot, create a React page in aheadofcow_web with table, filters, and pagination.
- Existing table columns or button styles do not match the UI draft, so update Ant Design Table columns and Button variants.
- After adding a new page, register it in src/router/index.js and verify that webpack compiles successfully.
- A list page needs local development data, so generate 15 mock rows with unique ids, filtering, and pagination.
Best For
- Frontend engineers owning aheadofcow_web pages, who need to turn screenshots into React + Ant Design pages by convention.
- Frontend developers maintaining admin list pages, who need consistent table columns, filters, pagination, and mocks.
- Frontend engineers taking over legacy page edits, who need to avoid touching backend_transaction code or API files.
- Engineers using agents for frontend scaffolding, who need page generation, routing, and compile checks.
Related Skills
Detects cats, dogs, and birds in images or video for home monitoring, returning structured reports and cloud-based history queries.
Helps plan pomodoro sessions, suggests white noise and anti-distraction tactics, and tracks focus time to improve deep work.
Generate a fair household deep-cleaning schedule and supplies checklist based on rooms, people, time, and task difficulty.
Structured mood journaling that records emotions, triggers, and bodily sensations to spot patterns and suggest coping strategies, not a substitute for therapy.