AgentToolHub
Skill

frontend-patterns

frontend-patterns — a Claude Code skill from rolemodel/rolemodel-skills

Features

  • ✓CSS guidance with BEM methodology
  • ✓Optics design system implementation
  • ✓UX design system guidelines
  • ✓Rails frontend patterns
  • ✓Stimulus controllers for interactive features
  • ✓Dynamic form updates with Turbo Streams
  • ✓Nested attributes with Turbo Streams and Simple Form
  • ✓RESTful Rails controllers and routing
  • ✓ActionCable for real-time WebSockets
  • ✓Typed attributes in Rails models
  • ✓Automated testing with RSpec and Capybara

Installation Guide

There are three ways to add these skills to your project. Choose the one that best fits your workflow.

Option 1: Copy individual skills (simplest)

Copy the skill folders you need directly into your project's skills directory.

For Claude Code:

bash
# Create the skills directory if it doesn't exist
mkdir -p .claude/skills

# Copy a skill into your project
cp -r path/to/rolemodel-skills/skills/bem-structure .claude/skills/bem-structure

Skills live in .claude/skills/<skill-name>/SKILL.md and are discovered automatically. Claude loads them when relevant to your conversation, or you can invoke them directly with /<skill-name>.

For GitHub Copilot:

bash
# Create the skills directory if it doesn't exist
mkdir -p .github/skills

# Copy a skill into your project
cp -r path/to/rolemodel-skills/skills/bem-structure .github/skills/bem-structure

Skills live in .github/skills/<skill-name>/SKILL.md and are loaded on-demand when Copilot detects a relevant task.

Option 2: Git submodule (keeps skills synced)

Add this repo as a git submodule, then point your AI agent at the skills directory. This makes it easy to pull updates as skills evolve.

bash
# Add the submodule
git submodule add https://github.com/RoleModel/rolemodel-skills.git .rolemodel-skills

# Initialize (for teammates cloning the repo)
git submodule update --init

Then tell your agent where to find the skills:

For Claude Code, you have a few options:

  • Use --add-dir to include the skills directory when launching Claude:

    • bash
        claude --add-dir .rolemodel-skills/skills

  • Add it to your project's .claude/settings.json so it's always available:

    • json
        {
      "additionalDirectories": [".rolemodel-skills/skills"]
    }

  • Reference the skills in your CLAUDE.md so Claude knows to read them when relevant:

    • markdown
        ## Skills

    This project uses shared AI agent skills from `.rolemodel-skills/skills/`.
    When working on CSS, read and follow the instructions in:
    - `.rolemodel-skills/skills/bem-structure/SKILL.md`
    - `.rolemodel-skills/skills/optics-context/SKILL.md`

    When reviewing UI for usability, read and follow:
    - `.rolemodel-skills/skills/laws-of-ux/SKILL.md`
    - `.rolemodel-skills/skills/usability-heuristics/SKILL.md`

  • Symlink individual skills into .claude/skills/ for automatic discovery:

    • bash
        mkdir -p .claude/skills
    ln -s ../../.rolemodel-skills/skills/bem-structure .claude/skills/bem-structure
    ln -s ../../.rolemodel-skills/skills/laws-of-ux .claude/skills/laws-of-ux

    For GitHub Copilot:

  • Reference the skills in .github/copilot-instructions.md so Copilot knows to read them when relevant:

    • markdown
        ## Skills

    This project uses shared AI agent skills from `.rolemodel-skills/skills/`.
    When working on CSS, read and follow the instructions in:
    - `.rolemodel-skills/skills/bem-structure/SKILL.md`
    - `.rolemodel-skills/skills/optics-context/SKILL.md`

    When reviewing UI for usability, read and follow:
    - `.rolemodel-skills/skills/laws-of-ux/SKILL.md`
    - `.rolemodel-skills/skills/usability-heuristics/SKILL.md`

  • Symlink individual skills into .github/skills/ for automatic discovery:

    • bash
        mkdir -p .github/skills
    ln -s ../../.rolemodel-skills/skills/bem-structure .github/skills/bem-structure
    ln -s ../../.rolemodel-skills/skills/laws-of-ux .github/skills/laws-of-ux

    To pull the latest skill updates:

    bash
    git submodule update --remote .rolemodel-skills

    Option 3: Install via skills.sh (community directory)

    skills.sh is a community directory and CLI for discovering and installing agent skills. If these skills are published there, you can install them with:

    bash
    npx skills add RoleModel/rolemodel-skills

    This installs skills into the appropriate directory for your agent automatically. You can also browse skills.sh to discover additional skills from the community.

    Reviews