A specialized agent skill for generating and restoring ThinkPHP UI components while maintaining project-specific style conventions and template logic.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install thinkphp-ui-restoration
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install thinkphp-ui-restoration using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is ThinkPHP UI Restoration?
The ThinkPHP UI Restoration skill allows AI agents to intelligently rebuild or create new user interface elements within a ThinkPHP environment. It bridges the gap between design references—such as screenshots or DOM snippets—and production-ready code by adhering to existing file structures and naming conventions. This tool is a vital part of the Openclaw Skills ecosystem for developers maintaining legacy or custom ThinkPHP applications.
By prioritizing the reuse of existing project structures like view/@components and public/__base/css/common.css, this skill ensures that any new code blends seamlessly with the existing codebase. It handles the technical nuances of ThinkPHP template syntax, ensuring that field access is safe and that UI components are fully wired with necessary mock data or controller assignments from the start.
ThinkPHP UI Restoration Use Cases
- Converting UI screenshots or design references into functional ThinkPHP .tpl components.
- Restoring missing page sections using existing project patterns.
- Synchronizing CSS, mock data, and controller bindings during UI development.
- Updating legacy components with modern responsive behaviors without breaking existing styles.
How ThinkPHP UI Restoration Works
- Analyzes the existing project structure, focusing on view/@components and public/__base/css/.
- Identifies current naming conventions, such as xqbj- class prefixes, to maintain visual consistency.
- Generates the .tpl structure using safe ThinkPHP syntax like default filters and isset checks.
- Updates common.css or page-specific styles to match the new component design.
- Configures View::assign or mock data in the controller to ensure the component is renderable immediately.
ThinkPHP UI Restoration Setup
To utilize this skill within your environment, ensure your SKILL.md is accessible to your AI agent. There is no heavy installation; simply point your agent to your ThinkPHP project root.
# Ensure your project follows the standard structure:
# view/@components/
# view/@pages/
# public/__base/css/
ThinkPHP UI Restoration Data Schema & Taxonomy
The skill organizes data based on the standard ThinkPHP MVC pattern, ensuring that every UI restoration includes all necessary dependencies:
| File Type | Directory Path | Description |
|---|---|---|
| Templates | view/@components/ | Reusable UI blocks and partials. |
| Page Views | view/@pages/ | Main entry points for the application UI. |
| Global Styles | public/__base/css/common.css | Shared CSS rules and design system constants. |
| Controller Data | app/BaseController.php | Mock data and view variable assignments. |
ThinkPHP UI Restoration Advanced Features
- Automated screenshot-to-code conversion following local project themes.
- Intelligent guarding against undefined indices using isset and |default syntax in templates.
- Seamless integration with existing xqbj- class prefix systems for consistent branding.
- Multi-file synchronization that updates views, styles, and controllers in a single workflow using Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
Apollo Evolution
Apollo Evolution is a framework for self-optimizing AI skills using biological principles of reproduction, mutation, and natural selection.
Content Engine
A high-performance content automation skill that transforms single briefs into 30+ platform-optimized assets with consistent brand voice.
Auto Design
An intelligent design system selector that automatically identifies and applies the best visual styles for your project based on context and intent.
Cold Email Sequence
A specialized AI skill for generating high-converting, multi-stage cold email sequences with built-in deliverability optimization and A/B testing.
Explore Europe
A specialized travel orchestration skill for AI agents to plan European itineraries with real-time data from Fliggy.
Explore Dubai
A comprehensive AI agent skill for orchestrating Dubai travel itineraries, including real-time flight searches, hotel bookings, and attraction planning via Fliggy data.
Featured*
