Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

elouangrimm/elouan-web-generator

Name: elouan-web-generator
Author: elouangrimm

/SKILL.md

npx skillsauth add elouangrimm/elouangrimm elouan-web-generator

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Elouan Web Generator

Generate production-ready static websites using Elouan's design system: dark-first aesthetic, zero border-radius, flat UI, stone neutral palette, and minimal motion.

Core principles

Dark-first: Near-black backgrounds (--stone-950), light stone text
Zero border-radius: Sharp corners on all elements
Flat UI: No gradients, no shadows (except tooltips/modals)
Minimal motion: Transitions 0.15s–0.3s max
Semantic colors: Always CSS custom properties, never raw hex in rules
Two font stacks: System sans for body, monospace for headings/code/UI

Repository structure

Every project uses this flat structure:

project-name/
├── index.html
├── style.css
├── script.js
├── page1/
│   └── index.html
├── assets/
│   ├── images/
│   └── fonts/
└── README.md

Rules:

Root-level files: index.html, style.css, script.js
All media/fonts in assets/ subdirectories
No build tools, preprocessors, or frameworks by default
Multi-page projects add additional HTML files at root
Deploy target: Vercel (all projects deployed to Vercel)

Step-by-step generation

1. Create HTML structure

Format:

4-space indentation (no tabs)
Zero comments unless documenting complex structure
Lowercase tags and attributes
Double quotes for attributes
One blank line between major sections
Self-closing tags without trailing slash

Required meta tags:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark">
<meta name="description" content="[Project description for SEO]">
<meta name="author" content="Elouan Grimm">

<meta property="og:title" content="[Project name]">
<meta property="og:description" content="[Project description]">
<meta property="og:type" content="website">
<meta property="og:url" content="[Project URL]">
<meta property="og:image" content="[URL to preview image]"> <!-- Optional but recommended -->

<meta name="twitter:card" content="summary_large_image"> <!-- Optional but recommended -->
<meta name="twitter:title" content="[Project name]">
<meta name="twitter:description" content="[Project description]">
<meta name="twitter:image" content="[URL to preview image]"> <!-- Optional but recommended -->

Favicon:

Generate a basic SVG favicon and include it:

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><!-- code here --></svg>"> <!-- or whatever -->

Or create a custom minimal SVG based on project theme (geometric shape, initial letter, etc.) using the stone color palette.

Complete HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="dark">
    <meta name="description" content="[Project description]">
    <meta name="author" content="Elouan Grimm">
    
    <meta property="og:title" content="[Project name]">
    <meta property="og:description" content="[Project description]">
    <meta property="og:type" content="website">
    
    <meta name="twitter:card" content="summary_large_image">
    
    <title>Project Name</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>🌐</text></svg>">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Project Name</h1>
    </header>

    <main>
        <section>
            <h2>Section Title</h2>
            <p>Content here.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Elouan Grimm</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

2. Create CSS with design tokens

Reference the complete design system at references/style.css (Elouan's reference stylesheet).

Organization order:

Design tokens (:root variables)
Reset (including border-radius: 0 !important)
Base / body
Typography
Links
Buttons
Forms
Layout
Components
Utilities

Required tokens:

:root {
    --stone-050: #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;
    --stone-950: #0c0a09;
    
    --blue: #3b82f6;
    --red: #ef4444;
    --green: #22c55e;
    --amber: #f59e0b;
    
    --bg: var(--stone-950);
    --bg-raised: var(--stone-900);
    --bg-surface: var(--stone-800);
    --border: var(--stone-800);
    --border-strong: var(--stone-500);
    --text: var(--stone-200);
    --text-muted: var(--stone-400);
    --text-faint: var(--stone-500);
    --text-bright: var(--stone-100);
    --accent: var(--blue);
    --accent-hover: #5193f8;
    
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Roboto Mono", "Cascadia Code", monospace;
    --line-height: 1.6;
    --line-height-tight: 1.2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0 !important;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: var(--line-height);
}

Format rules:

4-space indentation
Zero comments
One blank line between rule blocks
Properties in logical order: layout → box model → typography → visual
Never use raw hex values in rules, only in :root token definitions

3. Create JavaScript logic

Organization order:

Constants and configuration
DOM element references
State variables
Helper functions
Event listeners
Initialization code

Format:

4-space indentation
Zero comments
const by default, let for reassignment, never var
Arrow functions for callbacks
Template literals for strings
Semicolons required
One blank line between logical sections

Naming:

camelCase for variables/functions
SCREAMING_SNAKE_CASE for constants
Descriptive names, no abbreviations

Example:

const ANIMATION_DURATION = 300;

const modal = document.querySelector('.overlay');
const openButton = document.querySelector('#open-modal');

let isModalOpen = false;

function toggleModal() {
    isModalOpen = !isModalOpen;
    modal.classList.toggle('active', isModalOpen);
}

openButton.addEventListener('click', toggleModal);

document.addEventListener('DOMContentLoaded', () => {
    console.log('App initialized');
});

4. Create README

Use this structure:

# Project Name

One-sentence description.

## Features

- Feature one
- Feature two
- Feature three

## Usage

Brief instructions.

## Deployment

Deployed on [Vercel](https://vercel.com).

## Tech Stack

- Plain HTML5
- CSS3 (custom properties, no preprocessor)
- Vanilla JavaScript (ES6+)

## Design System

This project uses [Elouan's Design System](https://e5g.dev/css).

## License

MIT

Integration with other skills

You may use the frontend-design skill for layout assistance, but:

Override any conflicting styles with reference stylesheet tokens
Remove all border-radius values or set to 0
Flatten any gradients or shadows (except tooltips/modals)
Replace color schemes with stone scale and accent colors

Common patterns

For reusable UI component patterns (buttons, modals, etc.) and solutions to common edge cases, see references/patterns.md.

Validation checklist

Before delivering:

[ ] All files use 4-space indentation
[ ] Zero comments in any file
[ ] CSS uses only custom properties for colors (no raw hex in rules)
[ ] All elements have border-radius: 0
[ ] Headings use var(--font-mono)
[ ] Body text uses var(--font-sans)
[ ] HTML includes <meta name="color-scheme" content="dark">
[ ] HTML includes complete meta and Open Graph tags
[ ] HTML includes basic SVG favicon
[ ] README mentions Vercel deployment
[ ] Repository matches flat structure

Reference

Complete design system: references/style.css

elouangrimm/elouan-web-generator

/SKILL.md

Generates plain HTML, CSS, and JavaScript websites following Elouan's dark-first design system with zero border-radius, flat UI, stone color palette, and strict file organization. Use when creating or scaffolding web projects for Elouan, when asked to generate static sites with his design preferences, when user asks to create a website/web page/web project, when user requests a static site or front-end project, when user mentions generating HTML/CSS/JS, or when user references Elouan's design system or style preferences.

1 stars

development

Updated Apr 15, 2026

$ install --global

skillsauth

npx skillsauth add elouangrimm/elouangrimm elouan-web-generator

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 15, 2026, 5:15 PM126.4s5 files scanned

SKILL.md

name:: elouan-web-generator
description:: Generates plain HTML, CSS, and JavaScript websites following Elouan's dark-first design system with zero border-radius, flat UI, stone color palette, and strict file organization. Use when creating or scaffolding web projects for Elouan, when asked to generate static sites with his design preferences, when user asks to create a website/web page/web project, when user requests a static site or front-end project, when user mentions generating HTML/CSS/JS, or when user references Elouan's design system or style preferences.
license:: MIT
author:: elouangrimm
version:: 1.0.0

Elouan Web Generator

Generate production-ready static websites using Elouan's design system: dark-first aesthetic, zero border-radius, flat UI, stone neutral palette, and minimal motion.

Core principles

Dark-first: Near-black backgrounds (--stone-950), light stone text
Zero border-radius: Sharp corners on all elements
Flat UI: No gradients, no shadows (except tooltips/modals)
Minimal motion: Transitions 0.15s–0.3s max
Semantic colors: Always CSS custom properties, never raw hex in rules
Two font stacks: System sans for body, monospace for headings/code/UI

Repository structure

Every project uses this flat structure:

project-name/
├── index.html
├── style.css
├── script.js
├── page1/
│   └── index.html
├── assets/
│   ├── images/
│   └── fonts/
└── README.md

Rules:

Root-level files: index.html, style.css, script.js
All media/fonts in assets/ subdirectories
No build tools, preprocessors, or frameworks by default
Multi-page projects add additional HTML files at root
Deploy target: Vercel (all projects deployed to Vercel)

Step-by-step generation

1. Create HTML structure

Format:

4-space indentation (no tabs)
Zero comments unless documenting complex structure
Lowercase tags and attributes
Double quotes for attributes
One blank line between major sections
Self-closing tags without trailing slash

Required meta tags:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark">
<meta name="description" content="[Project description for SEO]">
<meta name="author" content="Elouan Grimm">

<meta property="og:title" content="[Project name]">
<meta property="og:description" content="[Project description]">
<meta property="og:type" content="website">
<meta property="og:url" content="[Project URL]">
<meta property="og:image" content="[URL to preview image]"> <!-- Optional but recommended -->

<meta name="twitter:card" content="summary_large_image"> <!-- Optional but recommended -->
<meta name="twitter:title" content="[Project name]">
<meta name="twitter:description" content="[Project description]">
<meta name="twitter:image" content="[URL to preview image]"> <!-- Optional but recommended -->

Favicon:

Generate a basic SVG favicon and include it:

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><!-- code here --></svg>"> <!-- or whatever -->

Or create a custom minimal SVG based on project theme (geometric shape, initial letter, etc.) using the stone color palette.

Complete HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="dark">
    <meta name="description" content="[Project description]">
    <meta name="author" content="Elouan Grimm">
    
    <meta property="og:title" content="[Project name]">
    <meta property="og:description" content="[Project description]">
    <meta property="og:type" content="website">
    
    <meta name="twitter:card" content="summary_large_image">
    
    <title>Project Name</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>🌐</text></svg>">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Project Name</h1>
    </header>

    <main>
        <section>
            <h2>Section Title</h2>
            <p>Content here.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Elouan Grimm</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

2. Create CSS with design tokens

Reference the complete design system at references/style.css (Elouan's reference stylesheet).

Organization order:

Design tokens (:root variables)
Reset (including border-radius: 0 !important)
Base / body
Typography
Links
Buttons
Forms
Layout
Components
Utilities

Required tokens:

:root {
    --stone-050: #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;
    --stone-950: #0c0a09;
    
    --blue: #3b82f6;
    --red: #ef4444;
    --green: #22c55e;
    --amber: #f59e0b;
    
    --bg: var(--stone-950);
    --bg-raised: var(--stone-900);
    --bg-surface: var(--stone-800);
    --border: var(--stone-800);
    --border-strong: var(--stone-500);
    --text: var(--stone-200);
    --text-muted: var(--stone-400);
    --text-faint: var(--stone-500);
    --text-bright: var(--stone-100);
    --accent: var(--blue);
    --accent-hover: #5193f8;
    
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Roboto Mono", "Cascadia Code", monospace;
    --line-height: 1.6;
    --line-height-tight: 1.2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0 !important;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: var(--line-height);
}

Format rules:

4-space indentation
Zero comments
One blank line between rule blocks
Properties in logical order: layout → box model → typography → visual
Never use raw hex values in rules, only in :root token definitions

3. Create JavaScript logic

Organization order:

Constants and configuration
DOM element references
State variables
Helper functions
Event listeners
Initialization code

Format:

4-space indentation
Zero comments
const by default, let for reassignment, never var
Arrow functions for callbacks
Template literals for strings
Semicolons required
One blank line between logical sections

Naming:

camelCase for variables/functions
SCREAMING_SNAKE_CASE for constants
Descriptive names, no abbreviations

Example:

const ANIMATION_DURATION = 300;

const modal = document.querySelector('.overlay');
const openButton = document.querySelector('#open-modal');

let isModalOpen = false;

function toggleModal() {
    isModalOpen = !isModalOpen;
    modal.classList.toggle('active', isModalOpen);
}

openButton.addEventListener('click', toggleModal);

document.addEventListener('DOMContentLoaded', () => {
    console.log('App initialized');
});

4. Create README

Use this structure:

# Project Name

One-sentence description.

## Features

- Feature one
- Feature two
- Feature three

## Usage

Brief instructions.

## Deployment

Deployed on [Vercel](https://vercel.com).

## Tech Stack

- Plain HTML5
- CSS3 (custom properties, no preprocessor)
- Vanilla JavaScript (ES6+)

## Design System

This project uses [Elouan's Design System](https://e5g.dev/css).

## License

MIT

Integration with other skills

You may use the frontend-design skill for layout assistance, but:

Override any conflicting styles with reference stylesheet tokens
Remove all border-radius values or set to 0
Flatten any gradients or shadows (except tooltips/modals)
Replace color schemes with stone scale and accent colors

Common patterns

For reusable UI component patterns (buttons, modals, etc.) and solutions to common edge cases, see references/patterns.md.

Validation checklist

Before delivering:

[ ] All files use 4-space indentation
[ ] Zero comments in any file
[ ] CSS uses only custom properties for colors (no raw hex in rules)
[ ] All elements have border-radius: 0
[ ] Headings use var(--font-mono)
[ ] Body text uses var(--font-sans)
[ ] HTML includes <meta name="color-scheme" content="dark">
[ ] HTML includes complete meta and Open Graph tags
[ ] HTML includes basic SVG favicon
[ ] README mentions Vercel deployment
[ ] Repository matches flat structure

Reference

Complete design system: references/style.css

Related Skills

openclaw/openclaw-secret-scanning-maintainer

development

VerifiedTrustedCommunity

Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.

357,764SKILL.mdUpdated Apr 15, 2026

openclaw/openclaw-secret-scanning-maintainer

openclaw/openclaw-release-maintainer

development

VerifiedTrustedCommunity

Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.

357,764SKILL.mdUpdated Apr 10, 2026

openclaw/openclaw-release-maintainer

openclaw/openclaw-qa-testing

development

VerifiedTrustedCommunity

Run, watch, debug, and extend OpenClaw QA testing with qa-lab and qa-channel. Use when Codex needs to execute the repo-backed QA suite, inspect live QA artifacts, debug failing scenarios, add new QA scenarios, or explain the OpenClaw QA workflow. Prefer the live OpenAI lane with regular openai/gpt-5.4 in fast mode; do not use gpt-5.4-pro or gpt-5.4-mini unless the user explicitly overrides that policy.

357,764SKILL.mdUpdated Apr 10, 2026

openclaw/openclaw-qa-testing

openclaw/openclaw-parallels-smoke

development

VerifiedTrustedCommunity

End-to-end Parallels smoke, upgrade, and rerun workflow for OpenClaw across macOS, Windows, and Linux guests. Use when Codex needs to run, rerun, debug, or interpret VM-based install, onboarding, gateway smoke tests, latest-release-to-main upgrade checks, fresh snapshot retests, or optional Discord roundtrip verification under Parallels.

357,764SKILL.mdUpdated Apr 10, 2026

openclaw/openclaw-parallels-smoke

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/elouangrimm/elouangrimm.git

# Copy into Claude Code skills folder (global)
cp -r elouangrimm/ ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

elouangrimm/elouangrimm

1 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT