How do I install the Frontend Engineering skill?

Run npx skillmds@latest add tomevault-io/frontend-engineering in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend Engineering safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend Engineering?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend Engineering free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend Engineering?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend Engineering by tomevault-io

Name: Frontend Engineering
Author: tomevault-io

Frontend Engineering

Specializes in building high-quality, brand-consistent frontend interfaces. This skill enforces the usage of 'README-as-Database' pattern and rendering content as rich OG cards. Use when this capability is needed.

tomevault-io 9a7b8f5 2 files · 2.2 KB Updated Sep 17, 2026

File contents

Frontend Engineering Skill

This skill provides instructions for acting as a Senior Frontend Engineer for the "Enlaces para Desarrolladores" project.

Core Responsibilities

Architecture: Implement a "README-first" architecture where README.md acts as the single source of truth for data.
UI Implementation: Build components using the brand-identity skill (Acid Green, Bento Grids, Interactive Cards).
Data Fetching: Parse markdown content to extract categories and links.
Rich Displays: Convert simple links into rich "Link Cards" by fetching Open Graph (OG) metadata.

Reference Documentation

Data Source Pattern

To understand how to fetch and structure data from the README: 👉 resources/readme-data-source.md

Component Specifications

For specific requirements on the "Link Card" and other UI elements: 👉 resources/link-card-component.md

Brand Integration

ALWAYS refer to the brand-identity skill for visual styling:

Colors: design-tokens.json
Tech Stack: tech-stack.md

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

Frequently asked questions