skills.rest
Final-Project-solicode-Websitee
Final-Project-solicode-WebsiteeOFFICIAL
Explore all skills by this author →
GitHub

developpeur-front

Convert validated HTML mockups into optimized front-end code with clean standards.

1|Updated Feb 23, 2026
Search Tags:#html#integration#front-end#scaffolding#mockups#clean-code#asset-optimization
One-click install
npx skills add https://github.com/Final-Project-solicode-Websitee/maquettage-projet-technique --skill developpeur-front-final-project-solicode-websitee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: developpeur-front
Source: https://github.com/Final-Project-solicode-Websitee/maquettage-projet-technique/tree/main/.agent/skills/developpeur-front
Command: npx skills add https://github.com/Final-Project-solicode-Websitee/maquettage-projet-technique --skill developpeur-front-final-project-solicode-websitee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert validated HTML mockups into maintainable, production-ready front-end code while preserving the approved visual design and enforcing strict code quality rules to avoid inline styles and dead code.

Core Features & Use Cases

  • Decision workflow: Analyze requests to determine whether to scaffold a project, integrate a full page, re-integrate a mockup component, or perform direct content edits.
  • Clean HTML standards: Apply consistent indentation, section comments, attribute ordering, and removal of AI-generated verbosity.
  • Asset optimization and scaffolding: Minify images, concatenate CSS/JS when appropriate, and initialize or integrate with modern CLI tooling (Vite, Parcel, Tailwind) for builds.
  • Use Case: Transform mockups/home.html into app/home.html with optimized assets and clean, production-ready markup without altering the visual design.

Quick Start

Integrate the mockup 'home' into app/home.html, optimize assets, and ensure the HTML follows clean-code guidelines.

Frequently Asked Questions about developpeur-front

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert HTML mockups into production-ready front-end code?▼

You can integrate a full page or re-integrate a mockup component by applying clean HTML standards, consistent indentation, section comments, and attribute ordering while removing AI-generated verbosity to ensure the output is maintainable.

Does front-end scaffolding work with Vite, Parcel, and Tailwind?▼

Yes, front-end scaffolding integrates with modern CLI tooling like Vite, Parcel, and Tailwind to initialize builds, minify images, and concatenate CSS/JS files when appropriate for your project structure.

How do I optimize assets and minify files for clean-code web projects?▼

To optimize assets for clean-code web projects, the Skill minifies images and concatenates CSS and JavaScript files during the build process, ensuring the final front-end code is lightweight and production-ready.

What is the best way to maintain clean HTML standards when integrating mockups?▼

The best way to maintain clean HTML standards when integrating mockups is to apply consistent indentation, section comments, and strict attribute ordering while enforcing rules against inline styles and dead code to preserve maintainability.

Why does my mockup integration generate dead code and inline styles?▼

Mockup integration often generates dead code and inline styles if strict code quality rules are not enforced; this Skill prevents that by removing AI-generated verbosity and applying non-invasive design constraints during conversion.

Related Skills

Explore More Software Engineering Skills→
code-vibe-academycode-vibe-academy
2

developpeur-front

Converts HTML mockups into front-end code using Vite and Tailwind CSS.

Official
Intermediate
LennyDevXLennyDevX

nuxchain-deploy

Build and deploy NuxChain production assets to Vercel with environment synchronization.

Community
Advanced
abhishekdutta18abhishekdutta18

plankton-code-quality

Run formatters and linters to enforce code quality during file edits.

Community
Intermediate
lostitonce420-beeplostitonce420-beep

mockup-extract

Extract UI components into standalone mockup sandboxes with rewritten imports and stubbed calls.

Community
Intermediate