Skip to content
TrustedSkillsbeta
Back to all skills

Frontend Architect

Checked
tomlord1122·vlatest·frontend

Designs scalable, maintainable frontend architectures using best practices and modern frameworks based on project requirements.

Repository

Install on your platform

Showing Claude Code. One command installs this skill into any of the agents below.

  1. 1

    Run this in your project

    terminal
    $ npx skills add tomlord1122/tomtom-skill --skill frontend-architect -a claude-code

  2. Uses the open-source skills CLI and needs Node.js. Add -g to install it for your user instead of this project.

What we know about this skill

Publisher

tomlord1122

Taken from the source listing. We haven't verified who controls this account.

Install target

Live repository

Not pinned. Installing fetches whatever the repository holds at the time you run the command.

No human has reviewed this code. The checks below are a static scan of the files at one commit — nobody has run this skill or judged whether it works. A skill runs with whatever access you give your agent, so read the source before you install it.

Automated safety checks

scanned

This skill passed all 6 checks. We read its files at one commit and looked for the things that make a skill dangerous to run — not for whether it works.

  • Declares what it does: passed

    SKILL.md parses and declares a name and a description.

    SKILL.md exists, its frontmatter parses, and it declares a name and a description.

  • No undeclared network calls: passed

    Makes no network calls.

    Every host the skill dials — from its scripts, its config endpoints or the commands it tells the agent to run — is either well-known package and API infrastructure or declared in its own frontmatter. Links in documentation are not counted.

  • No obfuscated payloads: passed

    No encoded or obfuscated payloads.

    No base64, hex or compressed blob is decoded and then executed, and no encoded shell commands.

  • No credential access: passed

    Reads no keys, tokens, keychains or credential files.

    Neither the code nor the SKILL.md instructions read SSH keys, cloud credentials, keychains, token stores, browser cookie databases or dotfiles that hold secrets.

  • No pipe-to-shell installers: passed

    No pipe-to-shell or download-and-run installers.

    No `curl … | sh` pattern, in the code or in the instructions, that runs code fetched at run time.

  • Pinned to a commit: passed

    Scanned tomlord1122/tomtom-skill at bfa41ed48c.

    The exact upstream commit SHA that was scanned is recorded, so the result refers to specific bytes.

Commit
bfa41ed48c
Manifest
skills/frontend-architect/SKILL.md
Scanned
1 file, 274 lines
This is a static scan, not a review. It reads the skill's files; it does not run them, and it cannot tell you whether the skill is any good or whether the code does what its description says. A skill runs with whatever access you give your agent.
What each check looks for →

About this skill

What it does

This skill acts as a Frontend Architecture Expert, assisting in designing scalable and maintainable frontend architectures. It guides you through a structured process of understanding context, analyzing requirements, selecting appropriate architectural patterns (like SSR, Atomic Design, or Feature-Sliced Design), and designing component structures. The goal is to create an architecture that balances performance, maintainability, developer experience, and SEO needs based on project specifics.

When to use it

  • When starting a new frontend project and needing guidance on the overall architecture.
  • When refactoring an existing codebase with pain points like poor performance or difficult maintenance.
  • To evaluate technology choices (frameworks, state management libraries) for a specific project's requirements.
  • When facing challenges related to SEO optimization in a single-page application.
  • For designing complex UIs requiring interactive elements and efficient data handling.

Key capabilities

  • Context Discovery: Analyzes existing codebases, dependencies, and configurations.
  • Requirements Analysis: Identifies core features, performance targets (LCP, FID, CLS), SEO needs, and data flow patterns.
  • Architecture Selection: Recommends architectural patterns like SSR, SSG, Atomic Design, Feature-Sliced Design, and centralized state management based on requirements.
  • Component Design: Guides the design of scalable and maintainable component structures focusing on single responsibility and reusability.

Example prompts

  • "I'm building a new e-commerce site using React. What frontend architecture would you recommend?"
  • "Our existing Angular application is slow and difficult to maintain. Can you help me analyze the current architecture and suggest improvements?"
  • "We need to improve our SEO for a single-page application built with Vue.js. How should we approach this?"
  • “What are the pros and cons of using Redux versus Zustand for state management in a large React application?”

Tips & gotchas

  • The skill relies on understanding existing codebases or project requirements, so providing detailed information is crucial for accurate recommendations.
  • Be prepared to answer questions about your team's skills and preferences as this influences the suggested architecture.
  • The skill presents trade-offs when recommending architectural choices; understand these implications before implementing suggestions.