fec-accessibility-chec…
Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels,…
@bovinphangInstall SkillDevelopment
Skill
/fec-image-generation
Use when generating or editing diagrams, charts, visual assets, posters, UI mockups, product images, infographics, academic figures, comics, avatars, storyboards, brand boards, or image-edit workflows, especially when exported PNGs need visual QA and bounded self-repair. Prefer
Claude Code
$ npx -y skills add bovinphang/frontend-craft --skill fec-image-generation --agent claude-code
Codex
$ npx skills add bovinphang/frontend-craft --skill fec-image-generation -a codex -y
Cursor
$ npx skills add bovinphang/frontend-craft --skill fec-image-generation -a cursor -y
Gemini CLI
$ npx skills add bovinphang/frontend-craft --skill fec-image-generation -a gemini-cli -y
GitHub Copilot
$ npx skills add bovinphang/frontend-craft --skill fec-image-generation -a github-copilot -y
OpenCode
$ npx skills add bovinphang/frontend-craft --skill fec-image-generation -a opencode -y
Windsurf
$ npx skills add bovinphang/frontend-craft --skill fec-image-generation -a windsurf -y
SKILL.md
fec-image-generation.SKILL.mdname: fec-image-generation
description: Use when generating or editing frontend UI mockups, product images, posters, brand visuals, illustrations, avatars, storyboards, or raster assets, including PNG quality checks. Do not use for structured architecture, sequence, workflow, or data-flow diagrams.
Frontend visual asset generation and editing
For UI, brand and product visuals, read [asset routing](references/artifact-routing.md). Select generate, edit or hybrid according to available source images, purpose, dimensions, transparency and delivery path.
Implementation and quality checks
Preserve original images and save edits separately by default. Do not present placeholders or concept drafts as final product imagery. Clarify branding, text, accessible alternatives and licensing; prefer targeted edits when suitable source imagery exists.
Inspect actual PNG output before delivery: verify subject rendering, clipping, composition, transparency and branding. Use the [shared-source PNG checker](scripts/png-qa.mjs). Default to at most two repairs; follow [PNG repair guidance](references/png-qa-autofix.md) to modify source, prompt or layout rather than destructively changing output pixels.
Report source and output paths, generation route, QA rounds and unresolved risks. Structured technical diagrams use the dedicated common diagram capability; this entry no longer maintains a technical diagram renderer.
Read more
name: fec-image-generation description: Use when generating or editing frontend UI mockups, product images, posters, brand visuals, illustrations, avatars, storyboards, or raster assets, including PNG quality checks. Do not use for structured architecture, sequence, workflow, or data-flow diagrams.
Frontend visual asset generation and editing
For UI, brand and product visuals, read [asset routing](references/artifact-routing.md). Select generate, edit or hybrid according to available source images, purpose, dimensions, transparency and delivery path.
Implementation and quality checks
Preserve original images and save edits separately by default. Do not present placeholders or concept drafts as final product imagery. Clarify branding, text, accessible alternatives and licensing; prefer targeted edits when suitable source imagery exists.
Inspect actual PNG output before delivery: verify subject rendering, clipping, composition, transparency and branding. Use the [shared-source PNG checker](scripts/png-qa.mjs). Default to at most two repairs; follow [PNG repair guidance](references/png-qa-autofix.md) to modify source, prompt or layout rather than destructively changing output pixels.
Report source and output paths, generation route, QA rounds and unresolved risks. Structured technical diagrams use the dedicated common diagram capability; this entry no longer maintains a technical diagram renderer.
Stats
23
Stars
3
Forks
Active
Maintenance
TypeScript
Language
MIT
License
Last commit
Created
Ships withfrontend-craft
frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.
2256 skills14 agents6 MCP
Stars on GitHub
Momentum
- stars in total
- 22
Other skills on frontend-craft.
@bovinphangInstall Skillfec-alchemy
Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices…
@bovinphangInstall Skillfec-api-integration
Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client…
@bovinphangInstall Skillfec-backend-requiremen…
Use when frontend work needs to communicate data, action, state, permission, validation, or business-rule needs to backend teams…
@bovinphangInstall Skillfec-browser-storage
Use when choosing, implementing, or reviewing browser storage such as localStorage, sessionStorage, IndexedDB, cookies, client…
@bovinphangInstall Skillfec-canvas-threejs
Use when building or reviewing Canvas 2D, Three.js/WebGL, React Three Fiber, GLSL shaders, ShaderToy-to-WebGL adaptation, 2D/3D…
@bovinphangInstall SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about fec-image-generation.
- Which coding agents can use fec-image-generation?
- fec-image-generation installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.