ultimate-frontend-skills

v5.0.0

Ultimate Frontend Skills (UFS for Claude). Build cinematic, editorial websites the way an award-winning studio does, on one route from brief to ship: a corpus of award-winning reference sites to decide against, WebGL mesh gradients, three-plane parallax with real depth, procedural and Blender-modelled three.js exploded product views, CC0 PBR materials and HDRI lighting, scroll choreography in GSAP and anime.js, and a typographic system that does not read as AI-generated. Ships a copy-in CSS chassis, motion and WebGL runtimes, a section library, a scaffolder, a headless render check, a bench detector that defers to frontend-design when it is installed, and one verify verdict.

CodexClaude Code2 Skills

By GevLicense: MIT0 GitHub starsUpdated last week

Directory evidence

Runtimes: Codex and Claude Code
Parsed components: 2 skill or MCP entries
Source updated: Sep 14, 2026
Manifest status: Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install ultimate-frontend-skills for Codex and Claude Code

Installs for the current user

codex plugin marketplace add IchenDEV/agent-plugin-mkt
codex plugin marketplace upgrade agent-plugin-marketplace
codex plugin add ultimate-frontend-skills@agent-plugin-marketplace

Paste and run these commands in a terminal with Codex. They add and refresh the PluginsMP catalog, then install this plugin.

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually

$ git clone https://github.com/ridelink0/ultimate-frontend-skills

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The repository root is the plugin root.

Plugin files

ultimate-frontend-skills/

├── .codex-plugin/plugin.json
├── .claude-plugin/plugin.json
├── skills/ultimate-frontend-skills/SKILL.md
└── skills/visual-research/SKILL.md

Included Skills2

ultimate-frontend-skillsskills/ultimate-frontend-skills/SKILL.md

Use whenever a website, landing page, marketing site, portfolio, microsite, homepage, or any public-facing web page is being built, redesigned, restyled, or made to "look better" - including plain HTML/CSS pages, Next/React/Astro sites, and single-file pages. Supplies the house style (editorial serif typography, warm-neutral and near-black grounds, cinematic imagery, layered scroll parallax, exploded technical views) plus a copy-in CSS chassis, a motion runtime, a section library, a scaffolder, and an audit.

visual-researchskills/visual-research/SKILL.md

Use when a question is better answered by looking than by reading - researching how websites or apps look, gathering design references, finding what a style or palette or typeface actually is in the wild, comparing competitors visually, or building a moodboard. Renders real sites and searches real images, then reads them as pictures.

Plugin manifests2

.codex-plugin/plugin.json

{
  "name": "ultimate-frontend-skills",
  "version": "5.0.0",
  "description": "Ultimate Frontend Skills (UFS for Claude). Build cinematic, editorial websites the way an award-winning studio does, on one route from brief to ship: a corpus of award-winning reference sites to decide against, WebGL mesh gradients, three-plane parallax with real depth, procedural and Blender-modelled three.js exploded product views, CC0 PBR materials and HDRI lighting, scroll choreography in GSAP and anime.js, and a typographic system that does not read as AI-generated. Ships a copy-in CSS chassis, motion and WebGL runtimes, a section library, a scaffolder, a headless render check, a bench detector that defers to frontend-design when it is installed, and one verify verdict.",
  "author": {
    "name": "Gev",
    "url": "https://github.com/ridelink0"
  },
  "homepage": "https://github.com/ridelink0/ultimate-frontend-skills",
  "repository": "https://github.com/ridelink0/ultimate-frontend-skills",
  "license": "MIT",
  "keywords": [
    "web design",
    "website",
    "landing page",
    "web development",
    "frontend",
    "css",
    "animation",
    "parallax",
    "scroll animation",
    "three.js",
    "webgl",
    "gsap",
    "anime.js",
    "3d website",
    "gradient",
    "typography",
    "editorial",
    "design system",
    "ui design",
    "cinematic",
    "blender",
    "3d model",
    "pbr",
    "hdri",
    "texture",
    "awwwards",
    "awards",
    "product page",
    "scroll choreography",
    "image generation"
  ],
  "skills": "./skills/",
  "interface": {
    "displayName": "Ultimate Frontend Skills",
    "shortDescription": "UFS for Claude: websites that look like a studio made them, not a model",
    "longDescription": "A pinned art direction plus the code that produces it. Editorial serif typography at real optical sizes, warm-neutral and near-black grounds in OKLCH, cinematic photography with eased scrims, layered scroll parallax, and exploded technical views built from stacked 2D layers rather than a 3D engine. Ships a copy-in CSS chassis, a dependency-free motion runtime, a library of section archetypes, a scaffolder, and an audit that fails the build on placeholder copy, missing image dimensions, pure black and white, absent reduced-motion handling, and the other marks of a generated page.",
    "developerName": "Ridelink",
    "category": "Developer Tools",
    "capabilities": [
      "Read",
      "Write"
    ],
    "websiteURL": "https://github.com/ridelink0/ultimate-frontend-skills",
    "defaultPrompt": [
      "Build me a landing page for a roofing company in Houston",
      "Give this page a WebGL gradient hero and real parallax",
      "Make this site look like it was designed, not generated"
    ],
    "brandColor": "#16140f"
  }
}

.claude-plugin/plugin.json

{
  "$schema": "https://anthropic.com/claude-code/plugin.schema.json",
  "name": "ultimate-frontend-skills",
  "version": "5.0.0",
  "description": "Ultimate Frontend Skills (UFS for Claude). Build cinematic, editorial websites the way an award-winning studio does, on one route from brief to ship: a corpus of award-winning reference sites to decide against, WebGL mesh gradients, three-plane parallax with real depth, procedural and Blender-modelled three.js exploded product views, CC0 PBR materials and HDRI lighting, scroll choreography in GSAP and anime.js, and a typographic system that does not read as AI-generated. Ships a copy-in CSS chassis, motion and WebGL runtimes, a section library, a scaffolder, a headless render check, a bench detector that defers to frontend-design when it is installed, and one verify verdict.",
  "author": {
    "name": "Gev",
    "url": "https://github.com/ridelink0"
  },
  "homepage": "https://github.com/ridelink0/ultimate-frontend-skills",
  "repository": "https://github.com/ridelink0/ultimate-frontend-skills",
  "license": "MIT",
  "keywords": [
    "web design",
    "website",
    "landing page",
    "web development",
    "frontend",
    "css",
    "animation",
    "parallax",
    "scroll animation",
    "three.js",
    "webgl",
    "gsap",
    "anime.js",
    "3d website",
    "gradient",
    "typography",
    "editorial",
    "design system",
    "ui design",
    "cinematic",
    "blender",
    "3d model",
    "pbr",
    "hdri",
    "texture",
    "awwwards",
    "awards",
    "product page",
    "scroll choreography",
    "image generation"
  ]
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[ultimate-frontend-skills on Agent Plugins Marketplace](https://pluginsmp.com/plugins/ultimate-frontend-skills)