skills.rest
twofoldtech-dakota
twofoldtech-dakotaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-classic

Standardize CSS, SASS, and JavaScript with 7-1 structure and BEM naming.

2|1|Updated Jan 10, 2026
Search Tags:#architecture#frontend#CSS#patterns#JavaScript#SASS#jQuery
One-click install
npx skills add https://github.com/twofoldtech-dakota/claude-marketplace --skill frontend-classic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-classic
Source: https://github.com/twofoldtech-dakota/claude-marketplace/tree/main/plugins/sitecore-classic-analyzer/skills/frontend-classic
Command: npx skills add https://github.com/twofoldtech-dakota/claude-marketplace --skill frontend-classic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill standardizes classic frontend patterns to reduce inconsistency in CSS, SASS, and JavaScript implementations.

Core Features & Use Cases

  • Standardizes file structure (7-1) and import orders for scalable CSS/SASS architectures.
  • Enforces consistent naming (BEM) and modular pattern usage across CSS, SCSS, and JS components.
  • Use Case: A team migrating a collection of legacy styles writes a single, coherent guide to bring new projects into the same architecture.

Quick Start

Use the frontend-classic skill to organize an existing project by applying the 7-1 structure and an explicit SCSS import order.

Frequently Asked Questions about frontend-classic

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

FAQPage Schema
How do I standardize CSS and SASS file structures in a legacy frontend project?▼

Standardize CSS and SASS file structures by implementing a documented 7-1 architecture pattern, enforcing BEM naming conventions, and applying a defined SCSS import order to ensure scalable and consistent project maintenance.

What is the 7-1 architecture pattern for SCSS?▼

The 7-1 architecture pattern is a structured approach for organizing SCSS files into seven distinct folders for components, layout, and utilities, plus a single main entry file that standardizes import rules for scalable CSS.

How do I organize a legacy jQuery and CSS project to reduce inconsistency?▼

Organize a legacy jQuery and CSS project by applying BEM naming conventions, a 7-1 file structure, and reusable component patterns to standardize imports and enforce consistency across the existing frontend stack.

Can I use BEM naming conventions with existing SASS and JavaScript components?▼

Yes, BEM naming conventions can be applied to existing SASS and JavaScript components to enforce modular pattern usage and achieve consistent naming across CSS, SCSS, and JS files.

Does this frontend standardization approach work for teams migrating legacy styles?▼

Yes, this approach is designed for teams migrating legacy styles, enabling them to write a single coherent guide that brings new projects into the same consistent CSS, SASS, and jQuery architecture.

Related Skills

Explore More Software Engineering Skills→
kensauruskensaurus
8

codebase-coherency

Audit codebases for naming, organization, and architectural pattern consistency.

Community
Advanced
ElowanmstElowanmst
1

scss-best-practices

Define SCSS file organization and naming conventions for maintainable stylesheets.

Community
Intermediate
SwokingSwoking

symfony-sk:css-component

Standardize CSS/SCSS component styling with BEM naming and CSS variables.

Community
Intermediate
bovinphangbovinphang
21

fec-legacy-to-modern-migration

Plan and execute staged migrations from legacy JavaScript and jQuery to React, Vue, or Next/Nuxt.

Community
Advanced