# 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. - Skill: `tomevault-io/frontend-engineering` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/frontend-engineering` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-engineering/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/frontend-engineering --- # Frontend Engineering Skill This skill provides instructions for acting as a Senior Frontend Engineer for the "Enlaces para Desarrolladores" project. ## Core Responsibilities 1. **Architecture**: Implement a "README-first" architecture where `README.md` acts as the single source of truth for data. 2. **UI Implementation**: Build components using the `brand-identity` skill (Acid Green, Bento Grids, Interactive Cards). 3. **Data Fetching**: Parse markdown content to extract categories and links. 4. **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`](resources/readme-data-source.md)** ### Component Specifications For specific requirements on the "Link Card" and other UI elements: 👉 **[`resources/link-card-component.md`](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](https://tomevault.io/claim/yamilayma) — claim your Tome and manage your conversions.