Agent Plugins Marketplace
← All plugins

frontend-css

v2.1.4

Frontend CSS/SCSS skills — rem units and SCSS-module structure, scoping & naming.

Claude Code2 Skills

By Roman Maslennikov1 GitHub starsUpdated 2 weeks ago

Directory evidence

Runtimes
Claude Code
Parsed components
2 skill or MCP entries
Source updated
Oct 6, 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 frontend-css for Claude Code

Installs for the current user
claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install frontend-css@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. 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/aquivalabs/BladeForge

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

Plugin files

plugins/frontend-css/
├── .claude-plugin/plugin.json
├── skills/rem/SKILL.md
└── skills/scss-modules/SKILL.md

Included Skills2

remskills/rem/SKILL.md

CSS Units — enforce rem for CSS/SCSS/Tailwind dimensions. Use whenever a hardcoded pixel length appears in a stylesheet or component's layout — spacing, sizing, or typography such as gap, padding, margin, width, height, or font-size — and the user wants it changed, reviewed, made consistent with a spacing scale, or made responsive to browser zoom/font-size. Applies whether the value is stated as px, an arbitrary Tailwind value like p-[10px], or an SCSS property. Do NOT trigger for genuinely pixel-appropriate values that stay in px: border-width, box-shadow offsets, or SVG attributes like width, height, and stroke-width on chart/vector elements.

scss-modulesskills/scss-modules/SKILL.md

House rules for authoring component SCSS — the .scss-over-.css convention, SCSS file structure, the color/spacing/radius variable & token system (never hardcode hex or magic numbers — add to variables first), and BEM structure (block → &__element → &--modifier). Use when writing or refactoring a component's styles, setting up the SCSS token/variable system, or consolidating hardcoded values to the scale. NOT for choosing a dimensional unit or converting px→rem (frontend-css:rem), naming a component's folder or its non-style files (frontend-react:component-structure), style import-alias policy (frontend-js:conventions), LWC/Aura styling (salesforce:lwc_development), or skeleton/Storybook files.

Plugin manifests1

plugins/frontend-css/.claude-plugin/plugin.json
{
  "name": "frontend-css",
  "description": "Frontend CSS/SCSS skills — rem units and SCSS-module structure, scoping & naming.",
  "version": "2.1.4",
  "keywords": [
    "css",
    "scss",
    "rem",
    "css-modules",
    "styling"
  ],
  "author": {
    "name": "Roman Maslennikov",
    "email": "[email protected]"
  }
}

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.

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